路由值发生改变时会触发路由
路由前置守卫语法
router.beforeEach((to, from ,next) => {
console.log(to);
console.log(from);
console.log(next);
})
//路由跳转之前先执行这里,决定是否要跳转
//参数1: 要跳转到的路由
//参数2: 从哪里跳转的路由
//参数3: 函数体中next()放行,让路由正常的跳转切换 next(false)留在原地不跳转路由, next(path路径)强制换成对应path路径跳转,强制修改到另一个路由路径上
// 路由前置导航守卫,路由值发生改变会触发
// 路由前置守卫, to 去到哪个页面,from从哪里来 next 放行
router.beforeEach((to, from, next) => {
// console.log(to.push)
// 定义一个白名单列表, 里面有登录页,注册页,也可以写其他页面
const whiteList = ['/login', '/Reg', '/404']
// 如果访问的是有权限的页面,就不需要拦截,直接放行
// includes数组方法,布尔值
if (whiteList.includes(to.path)) {
next()
// 如果访问的是有权限的页面, 就判断是否有token,如果有,直接放行
} else {
if (localStorage.getItem('token')) {
next()
} else {
// 没有token拦截到登录页面,让用户重新登录
next({ path: '/login' })
}
}
})