Как передать данные в Vue Router? - PullRequest
Новая
       15

Как передать данные в Vue Router?

0 голосов
/ 28 октября 2018

Я использую Vue Router.В моем коде я имел: 

<div v-bind:is="page.component_name" v-bind:page="page"></div>

, который работал, и данные page были переданы компоненту.Но как мне сделать то же самое с просмотром маршрутизатора?Это не похоже на работу: 

<router-view v-bind:page="page"></router-view>

js: 

var vm = new Vue({
    ...,
    router : new VueRouter({
        routes : [
            { path: '/foo', component: { template: '<div>foo</div>', created:function(){alert(1);} } },
            //{ path: '/bar', component: { template: '<div>bar</div>', created:function(){alert(2);} } },
            { path: '/bar', component: Vue.component("ti-page-report") }
        ]
    }),
     ...
});

1 Ответ

0 голосов
/ 28 октября 2018

vue-router имеет специальную страницу в документах о том, как передавать реквизиты в router-view.

Передача реквизитов в компоненты маршрутов

Пример фрагмента из документов:

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 }
    }
  ]
})

Если вы ищете упрощенное использование, props все равно можно передавать так же, как они передаются любому компоненту.Но компонент, который используется для рендеринга маршрута (тот, который указан в определении маршрута) должен ожидать получения реквизитов.

Вот простой пример использования передачи props в router-view:

Edit Vue Template

...