Question

如我们所知，为了对同一组件中的params更改作出反应，我们使用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？

Answer 1

来自beforeRouteUpdate上的documentation：

在呈现此组件的路径发生更改时调用，但此组件在新路由中重用。例如，对于具有动态参数/foo/:id的路线，当我们在/foo/1和/foo/2之间导航时，将重复使用相同的Foo组件实例，并且将调用此挂钩当发生这种情况时。

在 $route对象的值实际发生变化之前，无法确定钩子是否被称为。这是导航钩子与在$route上设置观察者之间的区别，在<{em> $route的值发生变化后，它将被称为。

使用beforeRouteUpdate导航防护，您可以确定是否要阻止路线更改（通过不调用next()）或完全转到其他路线（通过不同的路线）价值如next('/foo')，next({ name: 'foo' })等。）

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

Answer 2

正如@thanksd所说，beforeRouteUpdate就像守卫一样。通过观看，您无法阻止路线采取措施，但使用beforeRouteUpdate，您可以使用next功能进行操作。例如，您可以等待，直到您的数据被提取，然后继续到组件。

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