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

 

转载于:https://www.cnblogs.com/fanlu/p/10825275.html