Проблема с отображением компонентов, которые используют $ route с vue-styleguidist - PullRequest
Новая
       15

Проблема с отображением компонентов, которые используют $ route с vue-styleguidist

0 голосов
/ 05 октября 2019

У меня есть некоторые компоненты, которые используют 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 внутри компонентов, когда они появляются в руководстве по стилю - но я не могу понять, как это сделать.

Другой вариант - передать информацию о маршруте в компоненты в качестве реквизита. Это правильно отсоединит компоненты от маршрутизатора и устранит проблему, но будет связано с изменениями для каждого компонента и маршрута.

1 Ответ

0 голосов
/ 15 ноября 2019

Итак, я закончил рефакторинг всех своих компонентов, чтобы передать свойства маршрута, которые они использовали в качестве свойств. Это правильно отсоединяет компоненты от маршрутизатора и устраняет проблему, но это была партия работы.

...