Vue路由二——动态路由（vue2动态路由）

动态路由是建立在 简单路由的基础之上。简单路由也可以称为：静态路由。

动态路由与静态路由的唯一区别就是 ，动态路由中的 路由映射表是按照动态路径参数进行匹配的。

静态路由映射表：

动态路由映射表：

“路径参数”使用冒号 : 标记， 路径参数会被设置为this.$route.params的属性，可以在组件内通过this.$route.params来访问。

例如：

this.$route.params.id

this.$route.params.name

有一点要注意的是：

路径参数是非贪婪匹配，只匹配路径参数所在位置的内容，并不会匹配后面的所有路径。

例如：

路由映射表中的 path : /foo/:id 只匹配 to="/foo/a"，并不匹配 to="/foo/a/b" 路径参数id的值为 a。

写成完整形式 更加直观一些：

可以明显的看出来 路径参数只匹配 两个斜杠（ / ）之间的内容。

当使用动态路径参数，导航到同一个组件，该组件实例会被复用，而不是从新创建。官方：

因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

我们来看下 是不是这样：

我们监听几个Vue的生命钩子：

1. created(组件实例创建完成后调用),
2. mounted(组件挂载完成后调用),
3. updated(组件数据更新完成后调用),
4. destroyed(组件销毁完成后调用)

看看在导路由导航切换的时候都有几个生命钩子会被调用

导航到同一组件：

看下结果：

可以看到：

当组件第一次创建的时候，created 和 mounted生命周期钩子被调用。路由导航切换，只触发了 updated 生命周期钩子被调用，因为数据的变化触发了视图的更新 updated被调用。这也说明了导航到同一个组件，该组件实例会被复用，而不是从新创建。

导航到不同组件：

看一下效果：

可以看到：

路由导航切换的时候 监听的生命钩子全部被调用，这样说明了导航到不同组件，会创建一个新的当前导航到的组件实例，并销毁上一个导航的组件实例，而不是复用。

当导航到同一组件，导航路由切换时，因为组件复用不会触发updated以外的生命钩子，假如我们需要在 created或者 mounted生命钩子中做一些手脚处理一些业务的时候，怎么办呢？

Vue 提供了两种方式：

1. watch (监测变化) $route 对象

2. 使用 beforeRouteUpdate 守卫

路由的生命钩子称为 守卫，守卫这个词 用的很有意思，一看名字就知道是 前置调用。

路由生命钩子分三种：

1. 全局生命钩子：注册在 VueRouter实例上
2. 路由独享钩子：注册在路由映射表，表中每条记录对象均可注册一个独享的钩子。
3. 组件内路由钩子： 注册在 组件中。必须是 映射表中 记录对象中 component属性关联的组件，否则无效。

全局生命钩钩子：

1. beforeEach(to, from, next) 在路由映射表解析前被调用
2. beforeResolve(to, from, next) 在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后
3. afterEach(to, from) 在路由映射表解析之后被调用。

全局生命钩子的调用顺序是：

1. beforeEach(to, from, next)
2. beforeResolve(to, from, next)
3. afterEach(to, from)

参数：

1. to : 即将要进入的目标 路由对象， 其实就是 <router-link to="xxx"> 中to指向的路由对象。to.path 就是 <router-link to="xxx">中to的值
2. from : 当前导航正要离开的路由， 也就是导航未切换成功前的 当前路由对象。
3. next : 是个函数， 执行下一个钩子。这个方法一定要调用，不然无法执行下个钩子，路由也无法在继续执行下去。

其实写成 参数列表写成这样 function(from, to, next) 会更加直观一些。但是 千万不要这样写，参数位置不对。

路由独享生命钩子：

1. beforeEnter（to, from, next) 在路由映射列表中，选择一个路由之前，被调用。该钩子只有在组件新创建时被调用一次，组件复用时不会被调用。
2. beforeEnter 在 beforeEach之后被调用。

组件内路由生命钩子：

1. beforeRouteEnter（to, from, next) 在选择路由后，组件创建之前被调用。该钩子只有在组件新创建时被调用一次，组件复用时不会被调用。
2. beforeRouteUpdate(to, from, next) 导航切换触发路由更新，在路由更新前 调用 beforeRouteUpdate，beforeRouteUpdate又触发了 组件的更新，使组件调用updated钩子.
3. beforeRouteLeave(to, from, next) 导航离开当前组件前被调用，就是在导航切换，离开当前组件进入下一组件，在离开当前组件前被调用。该钩子只有在组件销毁时，才被调用。组件的复用时，不会被调用。

看一下整体执行流程：

写个demo看下执行效果：

可以看到：

当页面加载的时候，

1. beforeEach
2. beforeResolve
3. afterEach

全局生命钩子先执行一次。

当点击导航时：

1. 执行 beforeEach 全局生命钩子
2. 执行 beforeEnter 路由独享钩子
3. 执行 beforeRouteEnter 组件内路由钩子
4. 执行 beforeResolve 全局生命钩子
5. 执行 afterEnter 全局生命钩子
6. 创建组件

此时 beforeRouteUpdate 和 beforeRouteLeave 并未执行，

beforeRouteUpdate只有在导航切换触发路由更新之前才会执行。beforeRouteLeave只有组件销毁前，导航离开此组件前才会执行。

看下导航切换触发路由更新的情况：

可以看到 因为是组件复用，两个导航指向一个组件实例。导航切换时候 只有路由全局生命钩子和 组件内路由更新钩子beforeRouteUpdate执行了。

这就是为什么 当我们需要在 created或者 mounted生命钩子中做一些手脚处理一些业务的时候，可以通过 beforeRouteUpdate来执行。