25
2020
08

vue-router如何响应 路由参数 的变化?

问题:当使用路由参数时,例如从 /content?id=1 到 content?id=2,此时原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用,此时vue应该如何响应路由参数 的变化?


复用组件时,想对路由参数的变化作出响应的话, 可以watch (监测变化) $route 对象


const User = {

  template: '...',

  watch: {

    '$route' (to, from) {

      // 对路由变化作出响应...

    }

  }

}


或者使用 2.2 中引入的 beforeRouteUpdate 守卫:


const User = {

  template: '...',

  beforeRouteUpdate (to, from, next) {

    // react to route changes...

    // don't forget to call next()

  }

}


完整的 vue-router 导航解析流程

1、导航被触发。


2、在失活的组件里调用离开守卫。


3、调用全局的 beforeEach守卫。


4、在重用的组件里调用 beforeRouteUpdate守卫 (2.2+)。


5、在路由配置里调用beforeEnter。


6、解析异步路由组件。


7、在被激活的组件里调用beforeRouteEnter。


8、调用全局的 beforeResole 守卫 (2.5+)。


9、导航被确认。


10、调用全局的afterEach 钩子。


11、触发 DOM 更新。


12、用创建好的实例调用beforeRouteEnter 守卫中传给 next 的回调函数。

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。