Vue-Router导航守卫:
1.全局守卫
- router.beforeEach 全局前置守卫 进入路由之前
- router.beforeResolve 全局解析守卫在beforeRouteEnter调用之后调用
- 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 全局后置钩子');
});
2.路由独享守卫
可以为某些路由单独配置守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
// 参数用法都一样,调用顺序在全局前置守卫后面,所以不会被全局守卫覆盖
beforeEnter: (to, from, next) => {
//.....
}
}
]
})
3.路由组件内的守卫
- beforeRouteEnter 进入路由前
- beforeRouteUpdate 路由复用同一个组件时
- beforeRouteLeave 离开当前路由时
beforeRouteEnter (to, from, next) {
// 在路由独享守卫后调用 不能获取组件实例 `this`,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用 可以访问组件实例 `this`
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用,可以访问组件实例 `this`
}
生命周期钩子
在被keep-alive
包含的组件/路由中,会多出两个生命周期的钩子:activated
与 deactivated
。
activated调用时机:
第一次进入缓存路由/组件,在mounted
后面,beforeRouteEnter
守卫传给 next
的回调函数之前调用。
因为组件被缓存了,再次进入缓存路由/组件时,beforeCreate created beforeMount mounted
都不会触发。
deactivated调用时机:组件被停用(离开路由)时调用
使用了keep-alive
就不会调用beforeDestroy
(组件销毁前钩子)和destroyed
(组件销毁),因为组件没被销毁,被缓存起来了。
- ajax请求最好放在
created
里面,因为此时已经可以访问this了,请求到数据就可以直接放在data里面。 - 关于dom的操作要放在
mounted
里面,在mounted
前面访问dom会是undefined。 - 每次进入/离开组件都要做一些事情,用什么钩子:
-
不缓存:
进入的时候可以用created
和mounted
钩子,离开的时候用beforeDestory
和destroyed
钩子,beforeDestory
可以访问this,destroyed
不可以访问this。 -
缓存了组件:
缓存了组件之后,再次进入组件不会触发beforeCreate
、created
、beforeMount
、mounted
,如果想每次进入组件都做一些事情的话,可以放在activated
进入缓存组件的钩子中。
同理:离开缓存组件的时候,beforeDestroy
和destroyed
并不会触发,可以使用deactivated
离开缓存组件的钩子来代替。