javascript - 如何将数据传递给vue router router-view？

Question

我正在使用 Vue 路由器。在我的代码中，我曾经有:

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

这有效，并且页面数据被传递到组件。但是如何使用路由器 View 执行相同的操作呢？这似乎不起作用:

<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") }
        ]
    }),
     ...
});

Answer 1

vue-router 在文档中有一个专门的页面，介绍如何将 props 传递给 router-view。

Passing Props to Route Components

文档中的示例片段:

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。

这是将 props 传递给 router-view 的简单用法示例: