路由独享守卫是在路由配置页面单独给路由配置的一个守卫
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]})vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。
导航钩子有3个参数：
1、to:即将要进入的目标路由对象；
2、from:当前导航即将要离开的路由对象；
3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。
next()//直接进to 所指路由
next(false) //中断当前路由
next(‘route’) //跳转指定路由
next(‘error’) //跳转错误路由
beforeEach：
路由配置文件：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/home',
name: 'home',
component: HomePage
},
{
path:'*',
redirect:'/home'
}
],
})
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);
next();
})
export default router;
打印结果如下：
实现用户验证的代码：
router.beforeEach((to, from, next) => {
//我在这里模仿了一个获取用户信息的方法
let isLogin = window.sessionStorage.getItem('userInfo');
if (isLogin) {
//如果用户信息存在则往下执行。
next()
} else {
//如果用户token不存在则跳转到login页面
if (to.path === '/login') {
next()
} else {
next('/login')
}
}
})afterEach:
和beforeEach不同的是afterEach不接收第三个参数 next 函数，也不会改变导航本身，一般beforeEach用的最多，afterEach用的少.
router.afterEach((to,from)=>{ //这里不接收next
console.log(to);
console.log(from);
