首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue router 导航守卫生命周期

vue router 导航守卫生命周期

原创
作者头像
shirishiyue
修改2018-11-21 14:54:33
2.8K0
修改2018-11-21 14:54:33
举报
文章被收录于专栏:全栈码全栈码

导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。(记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫。)

具体有哪些?

router.beforeEach((to, from, next) => {             //全局前置守卫
router.beforeResolve((to, from, next) => {          //全局解析守卫
router.afterEach((to, from) => {                    //全局后置钩子

beforeEnter: (to, from, next) => {                  //路由独享守卫,在route里定义。

beforeRouteEnter (to, from, next) {                 //组件内定义守卫
beforeRouteUpdate (to, from, next) {                //组件内定义守卫
beforeRouteLeave (to, from, next) {                 //组件内定义守卫

router.onReady(callback, [errorCallback]) //在路由完成初始导航时调用,这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件。

注意:

1、这些守卫都是中间件模式,,,可以定义多个,按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中

2、什么时候结束? 在上述函数参数中,大部分都有一个 next() ,若最后一个 next 被调用了, 那么,则导航的状态就是confirmed(确认的)。

3、被确认后 要调用哪个? onReady() 函数。

4、beforeResolve 是在 被确认的 前一刻 调用。(区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。)

5、上面 大部分守卫 都无法访问到 vm 实例的。有三个组件内的守卫,其中两个可以访问到vm实例。

6、在整个路由流程中,完成离开流程后,,,最后一步是哪个?

最后一个是组件内的 beforeRouteEnter 这个守卫,,,到这里时,组件实例还未创建,不能访问 this,此时开始组件生命周期,完了后把组件 this 传递 给 beforeRouteEnter 的next 回调。结束。

完整的导航解析流程

  • 导航被触发。
  • 在失活的组件里调用离开守卫。
  • 调用全局的 beforeEach 守卫。
  • 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  • 在路由配置里调用 beforeEnter。
  • 解析异步路由组件。若有,先下载异步组建。
  • 在被激活的组件里调用 beforeRouteEnter。
  • 调用全局的 beforeResolve 守卫 (2.5+)。
  • 导航被确认。调用全局的 afterEach 钩子。再调用onReady(仅首次加载页面完响应,以后切路由都不会)。
  • 非重用组件,开始组件实例的生命周期 beforeCreate,created,beforeMount,mounted
  • 触发 DOM 更新。
  • 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

Vue2.0完整生命周期(包括路由守卫):https://www.jianshu.com/p/7ff8f31afebe

实际使用中各种问题汇总:

1、beforeEach 不响应?

new Vue({
  el: '#app', 。
  router,
  store,
  components: { App },
  template: '<App/>'
})

router.beforeEach((to, from, next) => {
  console.log('beforeEach 1...')
  next();
});

router.beforeResolve((to, from, next) => {
  console.log('beforeResolve 1...')
  next();
});

router.onReady(() => {
  console.log('onReady 1...')
});

router.afterEach((to, from) => {
  console.log('afterEach 1...')
});

//在有路由的url:http://localhost:8080/selectgid 强刷浏览器。。。。结果:

beforeResolve 1...
afterEach 1...
onReady 1...

// 原因:在new Vue 解析执行时,router守卫beforeEach就已经过了。这时的beforeEach还没定义。
// 解决:把 beforeEach 定义 放在 new Vue() 前面即可。

beforeEach 1...
beforeResolve 1...
afterEach 1...
onReady 1...

//总结:导航守卫定义时,尽量放在前面。

2、首页强刷页面时,好几个守卫不响应?

//在首页url:http://localhost:8080/ 强刷浏览器。。。。结果:
//注意,首页 / 并没有配置任何 router

beforeEach 1...
onReady 1...

//解决: 把 首页 / 加到 router里面,配上一个component

beforeEach 1...
beforeResolve 1...
afterEach 1...
onReady 1...

//原因:beforeResolve是等组件内守卫执行后才会调用。没有组件的话,当然不会调用。
//结论: 最好给首页加一个route

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
消息队列 TDMQ
消息队列 TDMQ (Tencent Distributed Message Queue)是腾讯基于 Apache Pulsar 自研的一个云原生消息中间件系列,其中包含兼容Pulsar、RabbitMQ、RocketMQ 等协议的消息队列子产品,得益于其底层计算与存储分离的架构,TDMQ 具备良好的弹性伸缩以及故障恢复能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档