通过vue-styleguidist显示使用$route的组件时出现问题

Question

我有一些在内部使用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或我的路由对象导入到styleguide中，因为这不受支持-而且它会导致重定向、路由保护等方面的很多问题……这与风格指南无关。

我想，我真正想做的是，当组件出现在样式向导中时，在组件内部模拟this.$route --但我不知道该怎么做。

另一种选择是将路由信息作为属性传递到组件中。这将正确地将组件与路由器解耦并修复问题，但它将涉及到对每个组件和路由的更改。

Answer 1

因此，我最终重构了所有组件，以传递它们用作属性的路由属性。这可以正确地将组件与路由器解耦，并修复问题，但这需要大量的工作。