前置路由守卫 router.beforeEach
判断页面是否需要登录
1 在路由中设置meta isToken用来判断是否需要登录才能进入的页面
{
path: '/login',
name: 'login',
component: () => import('../views/Login.vue'),
meta: {
title: '登录',
isToken: false
},
},
2 前置守卫判断
router.beforeEach((to, from, next) => {
// 获取token
let token = localStorage.getItem('token')
if (token && token != 'null') { //有token 放行
next()
} else {
// 判断该页面是否需要登录
if (to.meta.isToken) { //为true 表示需登录才能进入的页面
Toast('请先登录');
// 返回登录页面
next('/login')
} else {
next()
}
}
})
后置路由钩子 router.afterEach
设置动态的title
1 如上图,设置meta里的title属性
meta: {
title: '登录',
isToken: false
},
2 后置路由守卫设置
router.afterEach((to, from, next) => {
document.getElementById('titleId').innerHTML = to.meta.title
})
全局解析守卫 router.beforeResolve
在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用