Маршрутизатор Vue: как передать данные по умолчанию / начальному маршруту - PullRequest
Новая
       42

Маршрутизатор Vue: как передать данные по умолчанию / начальному маршруту

0 голосов
/ 04 мая 2020

У меня есть конфигурация маршрутизатора vue, настроенная следующим образом: 

[
    {
        name: 'home',
        path: '/',
        component: HomeComponent,
        props: true,
    },

    {
        name: 'detail',
        path: '/detail/:id',
        component: DetailComponent,
        props: true,
    }
]

Приложение, содержащее эту конфигурацию, выполняет следующее:

  1. Запрашивает API для объекта Foo
  2. Отображает заголовок с некоторой информацией из Foo
  3. Визуализирует маршрут по умолчанию ("home") с дополнительной информацией из Foo и списком элементов Bar (содержащихся в Foo), по которым пользователь может щелкнуть посетить подробный маршрут.

Проблема в том, как я могу передать данные Foo в домашний маршрут при первой загрузке? Поскольку API является частью компонента приложения (как this.api - не глобальный), я не могу жестко программировать реквизиты home внутри конфигурации маршрутизатора; и поскольку я не могу сослаться на это внутри beforeRouteEnter, я не могу использовать this.api для выполнения запроса перед отправкой домой.

Я пробовал:

  1. Передача Foo через <router-view :foo="myFoo" /> - это никак не повлияло.
  2. Повторная маршрутизация к дому через this.$router.push() или this.$router.replace() после загрузки Foo. Это также не имело никакого эффекта, даже с $forceUpdate.

Я рассмотрел:

  1. Передача данных через next() внутри beforeRouteLeave() приложения защиты навигации приложения , Это в лучшем случае кажется мне хрупким, поскольку мне придется учитывать каждый конкретный c маршрут, который получает опору foo.
  2. Любое количество ужасных хаков, включая секретные скрытые маршруты и другие маги c.

Я также подозреваю, что с любой глубокой связью я столкнусь с той же проблемой, поскольку приложению придется также получить foo, прежде чем передать его компоненту для маршрута.

Итак. Как я могу передавать данные из приложения верхнего уровня через реквизит на любой заданный маршрут во время загрузки страницы?

1 Ответ

1 голос
/ 04 мая 2020

Непонятно, как именно вы получаете объект Foo, но, предполагая, что вы получаете его внутри mounted() хука в App.vue, вы можете отправить его компоненту Home через хранилище Vuex:

Метод 1

Приложение. vue

mounted () {
  this.foo = getFoo()
},
computed: {
  foo: {
    get () {
      return this.$store.state.foo
    },
    set (value) {
      // commit or dispatch the object to store
    }
  }
}

Дом. vue

<div>{{foo}}</div>

computed: {
  foo () {
    return this.$store.state.foo
  }
}

Метод 2 - использование eventBus

Создайте файл с именем eventBus.js:

eventBus. js

import Vue from 'vue'
export const eventBus = new Vue()

Импортируйте созданный eventBus в main.js, куда вы импортируете Vue, и добавьте Vue прототип, если вы хотите сделать его доступным по всему миру:

Main. js

import { eventBus } from './eventBus'

Vue.prototype.$eventBus = eventBus

Приложение. vue

mounted () {
  this.foo = getFoo()
  // Send foo via event bus
  this.$eventBus.$emit('transferFoo', this.foo)
}

Home . vue

<div>{{foo}}</div>

data () {
  return {
    foo: {}
  }
},
mounted () {
  this.$eventBus.$on('transferFoo', data => {
    this.foo = data
  })
}
...