观看

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中的观看选项，还是将其添加到mixins中的@component。两者都在调用钩子，但接下来始终是undefined。我想也许next只有在被传递时才被定义，但是文档声明：

确保始终调用下一个函数，否则永远不会解析挂钩。

这就是为什么我假设它也总是存在的原因。我想如果它只是通过，只需要一个简单的

if(isFunction(next)) next()

我真正要问的是：next只有在明确传递时才可用吗？

Answer 1

根本不确定答案实际上是指什么。但是我遇到了同样的问题而且对我来说这是b / c我注册了更多的钩子而不是我用它认为它不重要。一旦我只注册了我定义的那个，它就按预期工作了。

即。如果组件仅提供beforeRouteUpdate，则无法工作：

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

但这会：

Component.registerHooks([
    'beforeRouteUpdate'
]);

Answer 2

我不是Vue的专家，但我想知道你是否在这里混合了两种机制......你似乎同时做了一个手表，以及一个与同一方法有关的路线更新。

Watch不会获得next参数，而beforeRouteUpdate会参数，所以我认为缺少的参数与仅使用Watch触发方法的to属性相关和from。

观看

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

beforeRouteUpdate

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

Answer 3

好的，所以文档说

要对同一组件中的params更改做出反应，您只需观察$ route对象：

和

或者，使用2.2中引入的beforeRouteUpdate防护：

使用打字稿注释时，必须将连接的回调命名为。不幸的是，我恰好称它为beforeRouteUpdate，因为我也在路由器文档中查找过它。现在我认为它会调用beforeRouteUpdate，它没有，它只是调用我这样命名的回调。

所以只需将回调重命名为onRouteChange更有意义，并且“做了诀窍”

beforeRouteUpdate中的“next”未定义

3 个答案:

观看

beforeRouteUpdate