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
  • 相关阅读:
    ●BZOJ 2752 [HAOI2012]高速公路(road)
    ●UVA 11021 tunnello
    ●POJ 2794 Double Patience
    【51Nod1555】布丁怪
    【LG1600】[NOIP2016]天天爱跑步
    【LG5171】Earthquake
    【LG4437】[HNOI/AHOI2018]排列
    【CF1097F】Alex and a TV Show
    【51Nod 1769】Clarke and math2
    【LG5330】[SNOI2019]数论
  • 原文地址:https://www.cnblogs.com/fanlu/p/10825275.html
Copyright © 2011-2022 走看看