什么是导航守卫
- vue-router提供的导航守卫主要用来监听路由的进入和离开
- vue-router提供了beforeEach()和afterEach()等钩子函数,这些钩子函数分别会在路由改变前后触发,正是这些钩子函数构成了导航守卫
- 记住参数或查询的改变并不会触发进入/离开的导航守卫
导航守卫的使用
- 在路由中可以通过元数据meta来定义页面标题
{
path: '/home',
component: Home,
meta: {
title: '首页'
}
},
{
path: '/about',
component: About,
meta: {
title: '关于'
}
}
全局前置守卫
-
beforeEach()
-
当一个路由跳转到另一个路由前就会触发
-
beforeEach()的使用格式:router.beforeEach( (to, from, next) => { } )
- to:即将要进入的目标的路由对象
- from:当前导航即将要离开的路由对象
- next:调用该方法后才能进入下一个钩子
- next()在不传入参数时,默认跳转到下一个页面
- next()方法中可以传入路径,如next('/')或next( {path:'/'} ),当前导航被中断,跳转到指定路径
-
利用导航守卫beforeEach()修改页面标题
router.beforeEach((to, from, next) => {
document.title = to.matched[0].meta.title
next()
})
全局后置守卫
-
afterEach()
-
当所有组件内守卫以及异步路由组件都被解析后调用
-
afterEach()的使用格式:router.afterEach( (to, from) => { } )
-
afterEach与beforeEach很相似,不同的是,afterEach()的参数只有两个,没有next,不需要手动调用next()方法,内部自动调用
router.beforeEach((to, from) => {
document.title = to.matched[0].meta.title
})
路由独享的守卫
-
beforeEnter
-
beforeEnter是写在某个路由的里面,只有在进入该路由前才会调用
-
beforeEnter()的使用格式:beforeEnter( (to, from, next) => { } )
-
与beforeEach几乎相似
{ path: '/about', component: About, meta: { title: '关于' }, beforeEnter: (to, from, next) => { console.log('beforeEnter') next() } }
[更多导航守卫请查阅:] (https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)