Vuejs，如何将道具传递给路由器渲染的组件？答案

【问题标题】：Vuejs, how to pass props to a Component rendered by Router?Vuejs，如何将道具传递给路由器渲染的组件？
【发布时间】：2020-04-07 21:29:25
【问题描述】：

我是 Vuejs 新手，所以很抱歉这是一个新手问题。

我已向我的应用程序添加了一个路由器，我想将我的主应用程序中的数据渲染到我的组件模板中，但它不起作用。

这就是我所拥有的：

Vue.use(VueRouter);

const Text = { props: ['text'], template: '<div>This is the text: {{text}} </div>' }

const routes = [
  { path: '*', component: Text, props: true }
]

const router = new VueRouter({
  routes: routes
})

new Vue({
  router: router,
  el: "#app",
  data: {
    text: "Hello there!"
  }
})

我预计 text 道具将链接到我的 App.data.text，但它没有发生。

这是一个 jsfiddle：https://jsfiddle.net/fguillen/psqztn93

【问题讨论】：

标签： javascript vue.js vue-router vue-props

【解决方案1】：

您可能希望通过router-view 转发道具（此处将text 传递给渲染组件Text）

<router-view :text="text"></router-view>

【讨论】：

【解决方案2】：

const Text = {
  props: ["text"],
  template: "<div>This is the text: {{text}} </div>"
};

const routes = [{ path: "*", component: Text }];

const router = new VueRouter({
  routes: routes
});

new Vue({
  router: router,
  el: "#app",
  data: {
    text: "Hello there!"
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.js"></script>

<div id="app">
  <router-view :text="text"></router-view>
</div>

【讨论】：