zoukankan      html  css  js  c++  java
  • vue(24)路由的拦截器

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

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

    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两个方法,和生命周期函数的使用方法一样
     
  • 相关阅读:
    Android Service 服务(一)—— Service
    ostringstream的使用方法
    【Android动画】之Tween动画 (渐变、缩放、位移、旋转)
    #pragma comment
    添加PDF文件对照度的粗浅原理,及方法
    Jenkins(二)
    “简密”App Store处女作开发总结
    Windows下FFmpeg高速入门
    Storm-0.9.2-incubating源代码编译打包
    几种开源分词工具的比較
  • 原文地址:https://www.cnblogs.com/maycpou/p/14780480.html
Copyright © 2011-2022 走看看