zoukankan      html  css  js  c++  java
  • 导航守卫

    导航守卫就是路由跳转过程中的一些钩子函数,这个过程中触发的这些函数能让你操作一些其它事情时,可以进行过滤操作,这就是导航守卫。

    ² 全局守卫

    # 全局前置守卫  路由规则文件中定义

    //当一个导航触发时,触发前置守卫,

    to: Route: 即将要进入的目标 路由对象

    from: Route: 当前导航正要离开的路由

    next: Function: 一定要调用该next方法,否则路由不向下执行。

    router.beforeEach((to, from, next) => {

      // ...

    })

     

    # 全局后置钩子

    // 此钩子不会接受 next 函数也不会改变导航本身

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

      // ...

    })

    ² 组件内守卫

    你可以在路由组件内直接定义以下路由导航守卫

    const Foo = {

      template: `...`,

      beforeRouteEnter (to, from, next) {

        // 在渲染该组件的对应路由被 confirm 前调用

        // 不!能!获取组件实例 `this`

        // 因为当守卫执行前,组件实例还没被创建

      },

      beforeRouteUpdate (to, from, next) {

        // 在当前路由改变,但是该组件被复用时调用

        // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 /foo/2 之间跳转的时候,

        // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

        // 可以访问组件实例 `this`

      },

      beforeRouteLeave (to, from, next) {

        // 导航离开该组件的对应路由时调用

        // 可以访问组件实例 `this`

      }

    }

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    flexbox弹性盒子布局
    LAMP环境 源码包安装
    用条件注释判断浏览器版本,解决兼容问题
    事件冒泡和事件捕获
    为js和css文件自动添加版本号
    uEditor独立图片上传
    修改netbeans模版头部的说明
    thinkphp多表关联并且分页
    thinkphp 独立分组配置
    荣耀路由HiLink一键组网如何实现?
  • 原文地址:https://www.cnblogs.com/ht955/p/14252701.html
Copyright © 2011-2022 走看看