写在前面:
通过vue-cli3.4.1生成的项目
先上代码及解释
以下全部的next 如果不手动调用 则不会跳转
router.js内如下
//页面切换前
router.beforeEach((to,from,next)=>{
next();
console.log(`router.js----beforeEach 需要next`);
// console.log(arguments);
})
//页面切换成功前
router.beforeResolve((to,from,next)=>{
next();
console.log(`router.js----beforeResolve 需要next`);
// console.log(arguments);
})
//页面切换后
router.afterEach((to,from)=>{
console.log(`router.js----afterEach`);
// console.log(arguments);
})
页面内如下
const NAME = 'home'
export default {
name: NAME,
//已挂载
mounted(){ console.log(`${NAME}.vue----mounted`); },
//已初始化
created(){ console.log(`${NAME}.vue----created`); },
//已更新
updated(){ console.log(`${NAME}.vue----updated`); },
//初始化前
beforeCreate(){ console.log(`${NAME}.vue----beforeCreate 无法操作data`); },
//更新前
beforeUpdate(){ console.log(`${NAME}.vue----beforeUpdate`); },
//挂载前
beforeMount(){ console.log(`${NAME}.vue----beforeMount`); },
//路由开始进入组件前
beforeRouteEnter(to,from,next){ next(); console.log(`${NAME}.vue----beforeRouteEnter 需要next 无法操作data`); },
/*
路由更新前
在当前路由改变，但是该组件被复用时调用
对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
*/
beforeRouteUpdate(){ console.log(`${NAME}.vue----beforeRouteUpdate`);},
//路由开始离开组件前
beforeRouteLeave(to,from,next){ next(); console.log(`${NAME}.vue----beforeRouteLeave 需要next`); },
//组件开始销毁前
beforeDestroy(){ console.log(`${NAME}.vue----beforeDestroy`); },
//组件已经销毁
destroyed(){ console.log(`${NAME}.vue----destroyed`); },
//组件已经取消激活
deactivated(){ console.log(`${NAME}.vue----deactivated`); },
//组件已经激活
activated(){ console.log(`${NAME}.vue----activated`); },
}
图解:
由于图片较宽
查看高清图片请点击图片后,点下方'查看原图'按钮
路由生命周期 查看高清图片请点击图片后,点下方'查看原图'按钮
页面生命周期 查看高清图片请点击图片后,点下方'查看原图'按钮
页面切换时页面的生命周期 查看高清图片请点击图片后,点下方'查看原图'按钮
页面切换时路由与页面的生命周期混合 查看高清图片请点击图片后,点下方'查看原图'按钮
