1.什么是Vue路由导航守卫?
官网:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。
导航守卫分为全局守卫,其中包括全局前置守卫,全局后置守卫,全局解析守卫,还有独享守卫,组件守卫等等
如果说拦截器是兢兢业业端着茶缸,登记每一个进出小区的门卫大爷,那么我愿称导航守卫为一群训练有素的的巡逻保安,
接下来谈下常用的两种守卫
1.全局前置守卫beforeEach
路由跳转之前, 会触发一个函数(全局前置守卫)
应用场景:权限控制───由全局前置守卫来决定是否放行
基本的语法
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})
全局前置守卫里面有三个参数,其含义分别是
- to: 向那个路径而去
- from: 从那个路径而来
- next: 函数, 是否放行
- next(false) //不放行
- next() //放行
//例如:强制跳转到 /find页面 - next(‘/find’)
注意:需要跳转时一定要调next(), 才会跳转下一页
具体用法示例:
const islogin = false //注册全局守卫
router.beforeEach((to, from, next) => {
if (!islogin && to.path === '/my') {
alert('请先登录后跳转!')
return next(false)
// return next('/find') //未登录强制跳转某页面
}
next()//放行
})
2.全局后置守卫afterEach
全局后置守卫不会改变导航本身,只是再跳转之后做判断
应用场景:跳转后的页面进行例如滚动条回调0 0 位置、更新页面title、懒加载结束等
基本的语法
router.afterEach((to, from) => {
// ...
})
注意:afterEach不接收第三个参数 next 函数
具体场景示例:
//后置导航守卫
router.afterEach(() => {
//进度条结束
NProgress.done()
})