vue路由拦截器
vue路由拦截器
有三种路由拦截器：全局的，针对单个路由的，针对单个组件的
1.全局的路由拦截器
写在router下的index.js的export default router 之前的代码。
前置拦截器：
router.beforeEach((to, from)=> { //from中包含跳转前的路由信息，to包含跳转到的目的路由信息
console.log(from.fullPath);
console.log(to.fullPath);
return true;//返回true表示允许跳转，返回false则不会跳转
})
后置拦截器
router.afferEach((to, from)=> {
console.log(from.fullPath);
console.log(to.fullPath);
})
在前置路由拦截器中我们可以写上查看用户是否登录，如果没有登录则让其跳转到登录页面。
2.单个路由的拦截器，写法和上面差不多，只是作为beforeEnter和afferEnter属性写在路由属性中
{
path: '/home',
name: 'Home',
component: ()=>import('../views/Home.vue'),
beforeEnter:(to,from)=>{
console.log(from.fullPath);
console.log(to.fullPath);
return true;
},
children:[{
path:'article',
component:()=>import('../views/Article.vue'),
}]
},
