我正在使用 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") }
]
}),
...
});
最佳答案
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
的简单用法示例:
关于javascript - 如何将数据传递给vue router router-view?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53034586/