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

正如我们所知，为了对我们使用的同一组件中的参数变化做出反应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 routerbeforeRouteUpdate?

来自文档 https://router.vuejs.org/guide/advanced/navigation-guards.html#using-the-options-api on beforeRouteUpdate:

当渲染此组件的路由发生更改，但此组件在新路由中重用时调用。例如，给定带有参数的路线/users/:id，当我们在之间导航时/users/1 and /users/2， 相同UserDetails组件实例将被重用，并且当发生这种情况时将调用此钩子。因为发生这种情况时组件已安装，所以导航防护可以访问this组件实例。

诚然，文档不清楚该钩子被调用before的价值$route对象实际上发生了变化。这就是这个导航钩子和设置观察者之间的区别$route，这将被称为after的价值$route已经改变。

使用beforeRouteUpdate导航守卫，您可以确定是否要阻止路线更改（通过不调用next()）或完全转到不同的路线（通过传递不同的路线值，例如next('/foo'), next({ name: 'foo' }), etc.).

这是一个例子fiddle http://jsfiddle.net/0hjpf5oL/1显示这些函数何时被调用。