Vue Router 中那些微小却重要的细节

几乎所有vue项目都离不开vue router，我们在项目中也使用了好几年，但一直都是直接拿来用，遇到问题解决问题，没有系统的总结过，在此，将使用过程中比较重要的点列出来，分享给大家。

一、路由的访问

今天在和小伙伴调试一个路由问题的过程中，她说总是记不住应该是用 router 还是 route 来访问路由。其实，结尾有或无 [r] 的区别还是很大的。

this.$router，获取的是系统的全部路由，引用官方文档的话就是“我们可以在任何组件内通过 this.$router 访问路由器”；而this.$route获取的是当前路由。要记住也很容易，单词【router】就是路由器的意思，而【route】有路线、航线的意思。

二、两种模式

Vue-router有两种模式，hash模式和history模式。

默认为hash模式，URL中会包含一个#号，当URL改变时，页面不会重新加载，从而实现了单页面应用。它的缺点是URL中的#号不美观且不符合URL规范，同时对SEO不利。

history模式利用history.pushState API实现了URL跳转不重新加载页面的功能，且去掉了#号，可以访问正常的URL。但缺点是，该模式需要后台配置支持，否则在刷新二级页面时会出现404。

三、路由中包含的信息

下面以hash模式下的路由为例，列举一下this.$route中包含的信息。

params：数据类型为Object，当通过参数定义动态路由时，可通过this.$route.params获取当前页面的动态参数。路径参数使用“:”标记，例如：

const Temp= {
  template: '<div>Temp</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数，用冒号标记
    { path: '/template/:id', component: Temp}
  ]
})

当匹配路径为/template/1时，输出this.$route.params的结果为{id:'1'}

query：数据类型为Object，上面定义的路由，还可以通过query实现id的切换：

const router = new VueRouter({
  routes: [
    // 动态路径参数，用冒号标记
    { path: '/template', component: Temp}
  ]
})

当匹配路径为/template?id=1时，输出this.$route.query的结果为{id:'1'}

fullPath：数据类型为String，vue-router封装的fullPath，其实就是location对象的hash，只是不包含#号。当匹配路径为localhost:8080/#/template?id=1时，this.$route.fullPath的输出结果为“/template?id=1”；window.location.hash的输出结果为“#/template?id=1”。

path：数据类型为String，fullPath中不包含query的部分，this.$route.path的输出结果为“/template”。

四、完整的导航解析流程（此处引自官网内容）

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。