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'),
    }]
  },

3.单个组件的路由拦截器则是在组件中配置beforeEnter和afterEnter两个方法，和生命周期函数的使用方法一样