vue路由守卫分为三种
1.全局前置守卫(beforeEach)
2.全局解析守卫(beforeResolve)
3.全局后置守卫(afterEach)
一、全局路由前置守卫(beforeEach) 这个用的最多
作用:在路由跳转之前做权限校验
场景:登录注册
需求:我需要在登录之前判断是否存在token,如果存在就放行,不存在就不放行
参数:
1. to:即将要进入的目标路由的对象
2. from 当前路由正要离开的路由
3.next 确认放行
代码:
// 前置路由写在main.js中
router.beforeEach((to, from, next) => {
const token = localStorage.token; // 获取token
if(token) { // 如果token不为null 就放行,如果为空 就不放行
next();
} else {
if(to.path === '/') { // 在为空的情况下,我们路由跳转的是'/' 就放行。'/'代表我们登录页
next()
} else { // 在为空的情况下,访问的不是'/', 就直接跳转到'/'
next({
path: '/'
})
}
}
})
二、全局后置守卫(afterEach)
作用:路由跳转之后触发
场景:可以让路由跳转之后让对应的页面的网页标题改变
需求:我需要跳转之后让网页标题进行一个改变
// 前置路由写在main.js中
router.afterEach((to,from)=>{
document.title = to.meta.title||'默认标题'
})
三、全局解析守卫(beforeEnter)
作用: 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发(这个一般用的很少)
router.beforeResolve((to, from, next) => {
// ...
})
更多推荐
vue路由全局守卫
发布评论