# Vue-Router导航守卫
vue-router全局有三个守卫： 1.router.beforeEach 全局前置守卫 进入路由之前 2.router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 3.router.afterEach 全局后置钩子 进入路由之后
- 使用方法：
// main.js 入口文件
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => {
next();
});
router.beforeResolve((to, from, next) => {
next();
});
router.afterEach((to, from) => {
console.log('afterEach 全局后置钩子');
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
to,from,next 这三个参数：
to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。
next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
路由独享守卫
如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
// ...
}
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
路由组件内的守卫：
1.beforeRouteEnter 进入路由前 2.beforeRouteUpdate (2.2) 路由复用同一个组件时 3.beforeRouteLeave 离开当前路由时
beforeRouteEnter (to, from, next) {
// 在路由独享守卫后调用 不！能！获取组件实例 `this`，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 `this`
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用，可以访问组件实例 `this`
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 你不知道的keep-alive
在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。
用法：
缓存动态组件：
<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，此种方式并无太大的实用意义。
<!-- 基本 -->
<keep-alive>
<component :is="view"></component>
</keep-alive>
<!-- 多个条件判断的子组件 -->
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
新增属性：
include：匹配的 路由/组件 会被缓存 exclude：匹配的 路由/组件 不会被缓存
缓存组件的使用方式：
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- 当include和exclude同时存在时，exclude生效，include不生效
<keep-alive include="a,b" exclude="a">
<!--只有a不被缓存-->
<router-view></router-view>
</keep-alive>
1
2
3
4
2
3
4
当组件被exclude匹配，该组件将不会被缓存，不会调用activated 和 deactivated