深入解析 Vue.js 路由器，新手也能轻松入门！

2024-01-21 04:58:23







## 浅显易懂的 Vue.js 路由器源码解析（一）

**前言** 

在正式进入 Vue.js 路由器之前，我们先从框架的思维跳出来，仔细思考一下前端路由的实现原理。观察如下案例：

```html
<html>
  <head>
    
  </head>
  <body>
    <a href="/home">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
    <div id="app"></div>
  </body>
</html>

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

在看 JS 代码之前，我们先快速回顾一下 HTML 代码：

在 <body> 中，我们定义了三个 <a> 标签，分别链接到 /home、/about 和 /contact。
在 <a> 标签下面，我们定义了一个空的 <div>，这就是 Vue 实例的挂载点。

现在，让我们来看看 JS 代码：

我们首先导入 Vue、VueRouter 和三个组件（Home、About 和 Contact）。
然后，我们使用 Vue.use() 安装 VueRouter 插件。
接下来的代码是定义路由配置。每个路由配置包含一个路径（path）和一个组件（component）。
最后，我们创建了一个新的 Vue 路由器实例，并将其传递给 Vue 实例的 router 选项。
最后一行代码是挂载 Vue 实例到 #app 元素上。

好了，现在我们已经完成了一个简单的 Vue.js 路由应用。当用户点击 <a> 标签时，Vue.js 路由器就会加载相应的组件到 #app 元素中。

Vue.js 路由器的实现原理

Vue.js 路由器是一个单页应用（SPA）框架，它允许您在不重新加载页面的情况下在不同的页面之间导航。这使得您的应用更加快速、流畅和用户友好。

Vue.js 路由器是如何实现的呢？它主要使用以下两种技术：

哈希模式 (hash mode)： 这是 Vue.js 路由器默认的模式。在哈希模式下，路由器会使用 URL 的哈希部分来标识不同的页面。例如，当您访问 /home 页面时，URL 将会是 http://localhost:8080/#/home。
历史模式 (history mode)： 历史模式使用 HTML5 的 History API 来管理路由。在历史模式下，URL 将不会包含哈希符号。例如，当您访问 /home 页面时，URL 将会是 http://localhost:8080/home。

Vue.js 路由器还提供了许多其他的功能，例如：