beforeRouteUpdate 和观看 '$route' 之间的区别 - Vue.js？

Posted 2023-02-22

【中文标题】beforeRouteUpdate 和观看 \'$route\' 之间的区别 - Vue.js？

【英文标题】：Difference between beforeRouteUpdate and watching '$route' - Vue.js?beforeRouteUpdate 和观看 '$route' 之间的区别 - Vue.js？

【发布时间】：2018-04-21 09:54:56

【问题描述】：

我们知道，要对同一组件中的参数更改做出反应，我们使用beforeRouteUpdate 挂钩或监视$route。

观看 $route：

const User = 
  template: '...',
  watch: 
    '$route' (to, from) 
      // react to route changes...
    
  

beforeRouteUpdate 方法：

const User = 
  template: '...',
  beforeRouteUpdate (to, from, next) 
    // react to route changes...
    next()
  

这两者有什么区别？如果两者都一样，那为什么 vue 路由器要引入beforeRouteUpdate？

【参考方案1】：

正如@thanksd 所说，$route 就像守卫。通过观看，您无法阻止路线采取行动，但使用beforeRouteUpdate，您可以使用next 功能来做到这一点。例如，您可以等到您的数据被提取后，然后继续处理该组件。

您可以在 vue-router 文档Data Fetching 中找到更多信息。

【参考方案2】：

来自documentationbeforeRouteUpdate：

当渲染该组件的路由发生变化时调用，但该组件在新路由中被重用。例如，对于具有动态参数/foo/:id 的路由，当我们在/foo/1 和/foo/2 之间导航时，将重复使用相同的Foo 组件实例，并且在发生这种情况时会调用此钩子。

诚然，文档并不清楚在$route 对象的值实际更改之前调用了钩子。这就是这个导航钩子和在$route 上设置一个观察者的区别，它会在$route 的值改变之后被调用。

使用beforeRouteUpdate 导航守卫，您可以确定是否要阻止路由更改（通过不调用next()）或完全转到不同的路由（通过传递不同的路由值，如@987654334 @、next( name: 'foo' ) 等）。

这是一个示例 fiddle，它显示了何时调用这些函数。

【讨论】：

只改变id可以复用/foo/:id组件；但是/foo/1 & /foo 不是同一个组件！ github.com/xgqfrms/vue/issues/57

此外，$route watcher 即使在各个组件的路由没有改变（但子组件之一）的情况下也会运行。 beforeRouteUpdate 仅特定于当前组件。