首页 > 其他 > 详细

vue(23)路由的拦截器

时间:2021-05-18 15:47:28      阅读:11      评论:0      收藏:0      [点我收藏+]

路由跳转前有一个拦截器,跳转后有一个拦截器。

有三种路由拦截器:全局的,针对单个路由的,针对单个组件的

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.afterEach((to,from)=>{
  console.log(from.fullPath);
  console.log(to.fullPath);
});
在前置路由拦截器中我们可以写上查看用户是否登录,如果没有登录则让其跳转到登录页面。
2.单个路由的拦截器,写法和上面差不多,只是作为beforeEnter和afterEnter属性写在路由的属性中:
  {
    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两个方法,和生命周期函数的使用方法一样
 

vue(23)路由的拦截器

原文:https://www.cnblogs.com/maycpou/p/14780480.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!