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
  • 相关阅读:
    matlablib安装Helvetica字体
    word插入矢量图的方法
    字体对应关系
    MySQL8.0.15基于mycat读写分离(windows环境)
    2.MySQL8.0.15主从同步(windows环境)
    1.MySQL8.0.15安装步骤(windows环境)
    mysql自带的压力测试工具
    FreeFileSync + Windows任务计划程序 实现自动备份功能
    FreeFileSync 设置服务器文件自动备份,同时可做本地代码程序同步软件
    dokcer镜像添加ssh服务
  • 原文地址:https://www.cnblogs.com/fanlu/p/10825275.html
Copyright © 2011-2022 走看看