如何将数据传递到vue路由器路由器视图？

Question

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

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

Answer 1

-Wl,--disable-new-dtags在文档中有专门的页面介绍如何将道具传递到a.out。

Passing Props to Route Components

文档中的示例片段：

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的简单用法示例：

Answer 2

需要访问要发送的道具的组件（“ ti-page-report”）只需添加它即可：

<template>
  <div>
    <h1>Now you can access page: {{ page }}</h1>
  </div>
</template>

export default {
  name: "TiPageReport",
  props: ['page'], // can now be accessed with this.page
  ...
};

有关正确使用道具的信息，请参见https://vuejs.org/v2/guide/components-props.html。