Передача реквизитов компонентам Vue.js, созданных с помощью Vue-router

Предположим, что у меня есть компонент Vue.js:

var Bar = Vue.extend({
    props: ['my-props'],
    template: '<p>This is bar!</p>'
});

И я хочу использовать его, когда какой-то маршрут в vue-router подобран следующим образом:

router.map({
    '/bar': {
        component: Bar
    }
});

Обычно, чтобы передать "myProps" в компонент, я бы сделал что-то вроде этого:

Vue.component('my-bar', Bar);

и в html:

<my-bar my-props="hello!"></my-bar>

В этом случае маршрутизатор автоматически создает компонент в элементе просмотра маршрутизатора при согласовании маршрута.

Мой вопрос в этом случае, как я могу передать реквизиты для компонента?

Ответы

Ответ 1

<router-view :some-value-to-pass="localValue"></router-view>

и в ваших компонентах просто добавьте prop:

props: {
      someValueToPass: String
    },

vue-router будет соответствовать prop в компоненте

Ответ 2

 const User = {
      props: ['id'],
      template: '<div>User {{ id }}</div>'
    }
    const router = new VueRouter({
      routes: [
        { path: '/user/:id', component: User, props: true }

        // for routes with named views, you have to define the props option for each named view:
        {
          path: '/user/:id', 
          components: { default: User, sidebar: Sidebar },
          props: { default: true, sidebar: false }
        }
      ]
    })

Режим объекта

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

Это официальный ответ. ссылка

Ответ 3

В маршрутизаторе,

const router = new VueRouter({
  routes: [
    { path: 'YOUR__PATH', component: Bar, props: { authorName: 'Robert' } }
  ]
})

И внутри компонента <Bar/>,

var Bar = Vue.extend({
    props: ['authorName'],
    template: '<p>Hey, {{ authorName }}</p>'
});

Ответ 4

к сожалению, не из предыдущих решений на самом деле отвечает на вопрос, так что вот один из Quora

в основном то, что документы не очень хорошо объясняют,

Когда для route.params установлено значение true, route.params будет установлен как компонент props.

так что на самом деле вам нужно при отправке реквизита по маршруту назначить его на ключ params ex

this.$router.push({
    name: 'Home',
    params: {
        theme: 'dark'
    }
})

так что полный пример будет

// component
const User = {
  props: ['test'],
  template: '<div>User {{ test }}</div>'
}

// router
new VueRouter({
  routes: [
    { 
      path: '/user',
      component: User,
      name: 'user',
      props: true 
    }
  ]
})

// usage
this.$router.push({
    name: 'user',
    params: {
        test: 'hello there' // or anything you want
    }
})

Ответ 5

Чтобы прямо ответить на вопрос, на момент написания этой статьи нет прямого способа сделать то, что вы хотите (помимо тех, которые уже показаны в предыдущих ответах). Но даже если бы я не думал, что это было бы целесообразно.

URL-адрес - это представление ресурса, и это ресурс (иногда вместе с его URL-адресом), который будет управлять изменением состояния. URL-адрес может содержать некоторые данные состояния, но он ограничен протоколом, хостом, путём и строкой запроса. Все, что требуется более сложным, должно выполняться как часть некоторого ресурса, полученного или созданного в ответ на запрос/навигацию.

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

Ситуации, когда может возникнуть соблазн передавать данные через маршрутизатор, обычно, когда данные уже присутствуют, и кажется излишним или расточительным, чтобы снова запросить его. Но что, если вы просто открываете браузер для этого URL-адреса, откуда должны поступать данные? Если рассуждение состоит в том, что он не ожидал, что он просто зайдет в это место, возможно, вам просто не нужен маршрут, который ведет к нему, возможно, вам просто нужно что-то с обработчиком событий щелчка, который будет загружать компонент и передавать данные как вы хотите.

Если, с другой стороны, вы считаете, что вам нужен маршрут (таким образом, маршрутизатор) для доступа к ресурсу, такой сценарий хорошо подходит для менеджера состояний (например, Vuex).

Поэтому вместо того, чтобы передавать данные компоненту через маршрутизатор, просто просто предоставьте ему минимум, необходимый ему, чтобы он мог запросить диспетчер состояний для дополнительных, более полных данных (т.е. Просто использовать vue-router и vuex так, re предназначалось для использования).

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

Ответ 6

Использование:

this.$route.MY_PROP

чтобы получить маршрут проп