• vue-路由导航(守卫)那些事


    在项目开发过程中,有些逻辑需要使用到路由守卫,例如未登录情况下强制跳转到登陆页面、路由重定向

    一、路由导航种类

    1、全局前置守卫   beforeEach
    2、全局后置守卫   afterEach
    3、路由独享守卫   beforeEnter  //用的较多
    4、组件进入守卫   beforeRouteEnter  //用的较多
    5、组件更新守卫   beforeRouteUpdate 
    6、组件离开守卫   beforeRouteLeave
    

    二、路由具体使用方法

    1、全局前置守卫beforeEach

    const router = new VueRouter({ ... })
    // to进入时的路由信息对象
    router.beforeEach((to, from, next) => {
      if(符合条件){
          //使用next()跳转到指定路由
      }else{
          //使用next()跳转到指定路由
      }
    })
    

    2、全局后置守卫afterEach

    与beforeEach相似

    router.afterEach((to, from) => {
      // ...
    })
    

    3、路由独享守卫beforeEnter

    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
            if(符合条件){
                //使用next()跳转到指定路由
            }else{
                //使用next()跳转到指定路由
            }
          
          }
        }
      ]
    })
    

    4、组件内的守卫

    const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 此处组件实例还没被创建,无法使用this关键字,但可以通过to(路由信息对象)
      },
      beforeRouteUpdate (to, from, next) {
        // 在当前路由改变,但是该组件被复用时调用
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }
    }
    
  • 相关阅读:
    Tomcat完美配置多个HOST主机,域名,SSL
    SpringCloud(10)使用Spring Cloud OAuth2和JWT保护微服务
    SpringCloud(9)使用Spring Cloud OAuth2保护微服务系统
    SpringCloud(8)微服务监控Spring Boot Admin
    React介绍
    SpringMVC-拦截器
    VSCode + WSL 2 + Ruby环境搭建详解
    Python中排序的灵活使用
    Linux中的进程与线程
    PHP-Phalcon框架中的数据库操作
  • 原文地址:https://www.cnblogs.com/piaoyi1997/p/13498655.html
Copyright © 2020-2023  润新知