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

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

vue-router 在文档中有专门的页面介绍如何将道具传递给 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 传递给 router-view 的简单用法示例：

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了解如何正确使用道具。

Answer 3

我个人决定使用 provide/inject 功能：以最小的开销保持反应性。

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

How to pass data to vue router router-view?

javascript

vue.js

vue-router

vue-component

vuejs2