组件钩子函数:

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
04-21 07:27
查看更多