“导航”表示路由正在发生改变。限制路由跳转用导航守卫。守卫就像皇宫内的护卫一样。分为三种:全局守卫,路由独享守卫,组件内守卫。
一、全局守卫(全局前置守卫,全局解析守卫,全局后置守卫)/在router/index.js下
1.全局前置守卫(在路由跳转之前进行判断)
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// to:目标路由
//from:来源路由
//next():放行函数;next(path):放到指定路由;next(false):哪来的回哪去
})
2.全局解析守卫(在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。)
3.全局后置守卫
二、路由独享守卫:单个路由独享的守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
三、组件内的守卫:在组件内写(不常用)
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}