Vuejs，如何將 props 傳遞給 Router 渲染的 Component？

Question

我是 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

Answer 1

您可能希望通過路由器視圖轉發道具（此處將text傳遞給呈現的組件Text ）

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

Answer 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>