Vuejs,如何将道具传递给路由器渲染的组件?
Vuejs, how to pass props to a Component rendered by Router?
我是 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
您可能希望通过 router-view 转发道具(此处将 text
传递给呈现的组件 Text
)
<router-view :text="text"></router-view>
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>
我是 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
您可能希望通过 router-view 转发道具(此处将 text
传递给呈现的组件 Text
)
<router-view :text="text"></router-view>
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>