Как использовать «данные» или «методы» результата в VueRouter prop - PullRequest
Новая
       8

Как использовать «данные» или «методы» результата в VueRouter prop

0 голосов
/ 10 сентября 2018

У меня есть простое меню маршрутизатора, как указано ниже:

Tab 1 | Вкладка 2 | Вкладка 3

Маршруты привязаны с отдельным компонентом к каждой вкладке, как показано ниже. 

const router = new VueRouter({
  routes: [
    { path: '/views/type1', component: Type1, props: { listname: value} }
  ]
})

Проблема: Как route [] prop изменить, чтобы получить значение из «данных» vue. В принципе, один из компонентов принимает свойство как «Массив», и мне нужно извлечь эти данные из службы и подключить к компоненту. 

routes: [
        { path: '/views/type1', component: Type1, props: { collection: *[retrieve from service and attach here]*} }
      ]

// коллекция не может связываться с «методами» или «данными», она принимает только статические данные.

1 Ответ

0 голосов
/ 11 сентября 2018

Поле props в Vue Router не содержит свойств, которые должны быть переданы компоненту визуализированного представления, а является логическим флагом (или хэшем / сопоставлением имен представлений с логическими флагами)это говорит Vue Router передавать любые параметры маршрута (проанализированные по пути) в качестве свойств для компонента.

Например, с учетом следующего:

  • конфигурация маршрута: 

    {
  path: '/user/:name/:uid',
  component: User,
  props: true
}

  • User определение компонента: 

    export default {
  props: ['name', 'uid']
}

  • URL: 

    /user/john/123

Затем User будет отображаться с name, установленным на john и uid, установленным на 123, что эквивалентно этому: 

<User :name="john" :uid="123" />

Если вам нужно инициализировать представление с данными сервера, вы можете обернуть целевой компонент (например, с Type1View), который вы инициализируете после получения данных.В приведенном ниже примере Type1.list привязан к локальной переменной данных list.Когда Type1View монтируется, мы выбираем данные с сервера и сохраняем результат в list, который также обновляет Type1.list. 

<template>
  <div>
    <Type1 :list="list" />
  </div>
</template>

<script>
export default {
  name: 'Type1View',
  data() {
    return {
      list: []
    }
  },
  async mounted() {
    const data = await this.fetchData();
    this.list = data.list;
  }
}
</script>
...