组件钩子函数:
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