0

我有一些在this.$route内部使用的组件，用于各种用途。一些简化的示例是，this.$route.name用于查找页面的 i18n 字符串：

<h1>New {{ $t($route.name + '.label') }}</h1>

或观看$route并加载一些东西：

watch: {
    $route: {
      handler: 'loadItem',
      immediate: true
    }
  }

每当这些组件出现在 vue-styleguidist 中时，我都会在浏览器控制台中收到各种错误，并且不会为组件示例呈现任何内容：

index.js?1ef8:1 [Vue warn]: Error in callback for immediate watcher "$route": "TypeError: Cannot read property 'id' of undefined"

found in

---> <MyComponent> at src/components/MyComponent.vue
       <Anonymous>
         <Root>

我故意不将 vue-router 或我的路由对象导入样式指南，因为这不受支持 - 它会导致重定向、路由保护等许多问题......这些与样式指南无关。

我认为，我真正想做的是this.$route在组件出现在样式指南中时对其进行模拟——但我不知道该怎么做。

另一种选择是将路由信息作为道具传递给组件。这将正确地将组件与路由器分离并解决问题，但它将涉及对每个组件和路由的更改。

4

1 回答 1

1

因此，我最终重构了所有组件，以传递它们用作属性的路由属性。这样可以将组件与路由器正确分离并解决问题，但工作量很大。

于 2019-11-15T00:10:13.393 回答