Vuejs: данные через роутер-просмотр - PullRequest
1 голос
/ 06 марта 2019

Это хорошая практика для передачи данных через представление роутера? У меня есть вложенный маршрутизатор, и некоторые дети должны иметь доступ к данным, которые есть у родителей. Я знаю, что Vuex - это способ передачи данных по всему приложению, но я хотел бы знать, каковы точные недостатки привязки данных к представлению маршрутизатора, чтобы сделать его доступным в дочерних компонентах. Так что сейчас у меня есть что-то вроде этого:

<router-view v-bind:list="array" />

Ответы [ 2 ]

1 голос
/ 06 марта 2019

Вы можете программно пройти через маршрутизатор, как показано ниже, из триггера родительского компонента ниже fn при щелчке или перенаправлении

this.$router.push({
      name: 'ChildRouteName',
      params: {'type':'name', 'id': '1',}
})

и в дочернем компоненте получить параметры, подобные этому

type = this.$route.params['type']
id = this.$route.params['id']
0 голосов
/ 06 марта 2019

Вы можете передавать данные в отрендеренный компонент, используя router-view, но, скорее всего, это не то, что вам нужно.

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

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

Вы можете определить свой маршрут для преобразования параметров, установленных при маршрутизации в подпорки к компоненту. Подробнее здесь . Это означает, что вы можете сделать звонок, подобный этому:

<router-link :to="{ name: 'routeName', params: { id: 1 }}">Go to route</router-link>

и тогда любой компонент, зарегистрированный для routeName, получит для пропеллера id значение 1. То же самое произойдет, если вы запустите навигацию программно.

...