zoukankan      html  css  js  c++  java
  • vue之生命周期与导航守卫

    组件钩子函数:

    beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destoryed

    还有两个特殊的(使用keep-alive):activated、deactivated(不详述)

    v2.5.0+新增: errorCaptured (暂时还不知道咋用)

    路由守卫:

    全局&路由独享:

    beforeEach、beforeResolve(v2.5.0+新增)、afterEach ;beforeEnter(路由独享,类似beforeEach)

    组件内:

    beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

    代码示例:

    //Router定义
    
    Vue.use(Router)
    
    const router = new Router({
        ...
    })
    
    //导航守卫
    
    router.beforeEach((to, from, next) => {
      console.log("导航前置守卫: beforeEach,");
      next();
    })
    router.afterEach((to, from) => {
      console.log("导航后置守卫: afterEach,");
    }) 
    router.beforeResolve ((to, from, next) => {
      console.log("导航解析守卫: beforeResolve,");
      next();
    }) 

    组件钩子:

    export default {
      //钩子
      beforeCreate(){
        console.log("组件钩子: beforeCreate");
      },
      created(){
        console.log("组件钩子: created");
      },
      beforeMount(){
        console.log("组件钩子: beforeMount");
      },
      mounted(){
        console.log("组件钩子: mounted");
      },
      beforeUpdate(){
        console.log("组件钩子: beforeUpdate");
      },
      updated(){
        console.log("组件钩子: updated");
      },
      beforeDestroy(){
        console.log("组件钩子: beforeDestroy");
      },
      destoryed(){
        console.log("组件钩子: destoryed");
      },
      beforeRouteEnter (to, from, next) {
        console.log("组件内部守卫: beforeRouteEnter,");
        next()
      },
      beforeRouteUpdate (to, from, next) {
        console.log("组件内部守卫: beforeRouteUpdate,");
        next()
      },
      beforeRouteLeave (to, from, next) {
        console.log("组件内部守卫: beforeRouteLeave,");
        next()
      }
    }

    执行输出顺序:

        导航前置守卫: beforeEach
        组件内部守卫: beforeRouteEnter
        导航解析守卫: beforeResolve
        导航后置守卫: afterEach
        组件钩子: beforeCreate
        组件钩子: created
        组件钩子: beforeMount
        组件钩子: mounted
        //执行跳转
        组件内部守卫: beforeRouteLeave
        导航前置守卫: beforeEach
        导航解析守卫: beforeResolve
        导航后置守卫: afterEach
        组件钩子: beforeDestroy
  • 相关阅读:
    尬聊攻略丨过年回家,你最怕被亲戚问什么?
    有人被盗刷900次? 支付宝发布年终“神反转”盘点
    470余万条疑似12306用户数据遭贩卖 嫌疑人被刑拘
    利用Python实现对Web服务器的目录探测
    栈空间溢出
    KB奇遇记(6):搞笑的ERP项目团队
    探寻不同版本号的SDK对iOS程序的影响
    阅读《Android 从入门到精通》(24)——切换图片
    leetcode
    Grunt的配置及使用(压缩合并js/css)
  • 原文地址:https://www.cnblogs.com/fanlu/p/10825275.html
Copyright © 2011-2022 走看看