"next" 在 beforeRouteUpdate 中未定义

Question

@Component({
  mixins: [template],
  components: {
    Sidebar
  }
})
export default class AppContentLayout extends Vue {

  @Prop({default: 'AppContent'})
  heading: string;

  @Watch('$route')
  beforeRouteUpdate (to: Object, from: Object, next: Function) {
    // react to route changes...
    // don't forget to call next()
    Logger.log(to)
    Logger.log(from)
    next();
  }
}

基于docs，beforeRouteUpdate 应该收到to、from 和next。但是，对我来说，next 始终是未定义的，无论我使用 a property decorator 中的 watch 选项还是将其添加到 @component 中的 mixins 时。两者都在调用钩子时起作用，但下一个始终是undefined。我想也许next 仅在通过时才被定义，但文档状态：

确保总是调用下一个函数，否则钩子永远不会被解析。

这就是为什么我假设它也始终存在。我猜如果它只有在通过时才存在，那么简单

if(isFunction(next)) next()

所以我真正要问的是：next 是否仅在显式传递时可用？

Answer 1

我不是 Vue 方面的专家，但我想知道您是否在这里混合了两种机制……您似乎同时进行了 watch 和 before route update 都与同一个方法有关。

Watch 没有得到 next 参数，而 beforeRouteUpdate 得到了，所以我想缺少的参数与仅使用 to 和 from 触发方法的 Watch 属性有关。

观看

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

路由更新前

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

Answer 2

好的，文档是这样说的

要对同一组件中的参数变化做出反应，您可以简单地观察 $route 对象：

和

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

当你使用 typescript 注释时，你必须命名你连接的回调。不幸的是，我只是碰巧称它为beforeRouteUpdate，因为我还在路由器文档中查找了它。现在我以为它会调用beforeRouteUpdate，但它没有，它只是调用了我这样命名的回调。

因此，只需将回调重命名为 onRouteChange 更有意义并且“成功了”

Answer 3

完全不确定答案实际上指的是什么。但是我遇到了同样的问题，对我来说这是 b/c 我注册的钩子比我使用的要多，我认为这无关紧要。一旦我只注册了我定义的那个，它就会按预期工作。

即如果组件只提供beforeRouteUpdate，这将不起作用：

Component.registerHooks([
    'beforeRouteEnter',
    'beforeRouteLeave',
    'beforeRouteUpdate'
]);

但这会：

Component.registerHooks([
    'beforeRouteUpdate'
]);