写在前面:

通过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`);  },
}

图解:

由于图片较宽

查看高清图片请点击图片后,点下方'查看原图'按钮

路由生命周期 查看高清图片请点击图片后,点下方'查看原图'按钮

页面生命周期 查看高清图片请点击图片后,点下方'查看原图'按钮

页面切换时页面的生命周期 查看高清图片请点击图片后,点下方'查看原图'按钮

页面切换时路由与页面的生命周期混合 查看高清图片请点击图片后,点下方'查看原图'按钮

查看高清图片请点击图片后,点下方'查看原图'按钮