• 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`
      }
    }
    
  • 相关阅读:
    msbuild.exe保持打开状态,锁定文件
    angular中使用echarts并实现数据更新
    浅谈flexible.js移动端自适应方案
    centos7 安装
    尚硅谷Java基础篇(717集)
    auto 和 decltype
    一个简单的 socket 网络编程
    项目搭建过程中初始化mysql常遇到的问题总结
    超微服务器内存不在位
    UEFI模式下修改RAID组cache方法
  • 原文地址:https://www.cnblogs.com/piaoyi1997/p/13498655.html
Copyright © 2020-2023  润新知