У меня есть некоторые компоненты, которые используют 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
внутри компонентов, когда они появляются в руководстве по стилю - но я не могу понять, как это сделать.
Другой вариант - передать информацию о маршруте в компоненты в качестве реквизита. Это правильно отсоединит компоненты от маршрутизатора и устранит проблему, но будет связано с изменениями для каждого компонента и маршрута.