一、导航守卫
“导航”表示路由正在发生改变。vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
导航守卫有三种：
- 全局导航守卫
- 路由独享守卫
- 组件内的守卫
二、全局导航守卫
1、全局前置守卫
可以使用 router.beforeEach 注册一个全局前置守卫
const router = new VueRouter({
... })
router.beforeEach((to, from, next) => {
// ...
})
该守卫方法接收三个参数：
-
to: Route，即将要进入的目标的路由对象 -
from: Route，当前导航正要离开的路由对象 -
next: Function，调用该方法后, 才能进入下一个钩子。next参数有比较多的用法，可以进入 导航守卫 | Vue Router 官网 详细学习
使用案例，我们可以利用beforeEach来完成页面标题的修改
const router = new VueRouter({
... })
router.beforeEach((to, from, next) => {
//从 from 跳转到 to
// document.title = to.meta.title;
document.title = to.matched[0].meta.title; //如果有嵌套路由，需要使用这种方式获取 meta中的数据
next();
})
2、全局后置守卫
//没有 next 参数
router.afterEach((to, from) => {
// ...
})
三、路由独享守卫
就是在路由配置上直接定义的守卫
扫描二维码关注公众号，回复：
12237404 查看本文章
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
四、组件内的守卫
可以在路由组件内直接定义以下路由导航守卫：
- beforeRouteEnter
- beforeRouteUpdate (2.2 新增)
- beforeRouteLeave
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`
}
}