zoukankan      html  css  js  c++  java
  • vue组件路由守卫钩子函数(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

    用法:与mounted,created等同级并列。

    export default {
      data() {
        return {
    
        }
      },
      methods: {
        go() {
          this.$router.push({ name: 'HelloWorld' })
        }
      },
      beforeRouteEnter(to, from, next) {
        console.log(this, 'beforeRouteEnter'); // undefined
        console.log(to, '组件独享守卫beforeRouteEnter第一个参数');
        console.log(from, '组件独享守卫beforeRouteEnter第二个参数');
        console.log(next, '组件独享守卫beforeRouteEnter第三个参数');
        next(vm => {
          //因为当钩子执行前,组件实例还没被创建
          // vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
          console.log(vm);//当前组件的实例
        });
      },
      beforeRouteUpdate(to, from, next) {
        //在当前路由改变,但是该组件被复用时调用
        //对于一个带有动态参数的路径 /good/:id,在 /good/1 和 /good/2 之间跳转的时候,
        // 由于会渲染同样的good组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
        console.log(this, 'beforeRouteUpdate'); //当前组件实例
        console.log(to, '组件独享守卫beforeRouteUpdate第一个参数');
        console.log(from, '组件独享守beforeRouteUpdate卫第二个参数');
        console.log(next, '组件独享守beforeRouteUpdate卫第三个参数');
        next();
      },
      beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        console.log(this, 'beforeRouteLeave'); //当前组件实例
        console.log(to, '组件独享守卫beforeRouteLeave第一个参数');
        console.log(from, '组件独享守卫beforeRouteLeave第二个参数');
        console.log(next, '组件独享守卫beforeRouteLeave第三个参数');
        next();
      }
    }
    

      

  • 相关阅读:
    fetch()函数使用的一些技巧
    JavaScript(第三十三天)【总结:封装基础前端框架】
    JavaScript(第三十二天)【Ajax】
    JavaScript(第三十一天)【JSON】
    JavaScript(第三十天)【XPath】
    JavaScript(第二十九天)【js处理XML】
    JavaScript(第二十八天)【Cookie与存储】
    JavaScript(第二十七天)【错误处理与调试】
    JavaScript(第二十六天)【表单处理】
    JavaScript(第二十五天)【事件绑定及深入】
  • 原文地址:https://www.cnblogs.com/lml2017/p/10769235.html
Copyright © 2011-2022 走看看