javascript 如何使用 vue 路由器将对象作为道具传递？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50506470/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass an object as props with vue router?
提问by tzortzik
I have the following fiddle https://jsfiddle.net/91vLms06/1/
我有以下小提琴https://jsfiddle.net/91vLms06/1/
const CreateComponent = Vue.component('create', {
props: ['user', 'otherProp'],
template: '<div>User data: {{user}}; other prop: {{otherProp}}</div>'
});
const ListComponent = Vue.component('List', {
template: '<div>Listing</div>'
});
const app = new Vue({
el: '#app',
router: new VueRouter(),
created: function () {
const self = this;
// ajax request returning the user
const userData = {'name': 'username'}
self.$router.addRoutes([
{ path: '/create', name: 'create', component: CreateComponent, props: { user: userData }},
{ path: '/list', name: 'list', component: ListComponent },
{ path: '*', redirect: '/list'}
]);
self.$router.push({name: 'create'}); // ok result: User data: { "name": "username" }; other prop:
self.$router.push({name: 'list'}); // ok result: Listing
// first attempt
self.$router.push({name: 'create', props: {otherProp: {"a":"b"}}}) // not ok result: User data: { "name": "username" }; other prop:
self.$router.push({name: 'list'}); // ok result: Listing
// second attempt
self.$router.push({name: 'create', params: {otherProp: {"a":"b"}}}) //not ok result: User data: { "name": "username" }; other prop:
}
});
As you can see first I am passing to CreateComponentthe userjust when I initialize the route.
正如你所看到的第一个我要传递CreateComponent的user只是当我初始化的路线。
Later I need to pass another property otherPropand still keep the userparameter. When I try to do this the object I send is not passed to the component.
后来我需要传递另一个属性otherProp并仍然保留user参数。当我尝试这样做时，我发送的对象没有传递给组件。
How can I pass the otherPropand still keep the user?
我怎样才能通过otherProp并仍然保留user？
The real purpose of the otherPropis to fill a form with the data from it. In the listing part I have the object and when I click the "edit" button I want to populate the form with the data that comes from the listing.
的真正目的otherProp是用表格中的数据填写表格。在列表部分我有对象，当我点击“编辑”按钮时，我想用来自列表的数据填充表单。
回答by Jacob Goh
It can work by using props's Function modeand params
它可以通过使用props 的 Function 模式和params
demo: https://jsfiddle.net/jacobgoh101/mo57f0ny/1/
演示：https: //jsfiddle.net/jacobgoh101/mo57f0ny/1/
when adding routes, use props's Function modeso that it has a default property userand it will add route.paramsas props.
添加路由时，使用props 的 Function 模式，这样它就有一个默认属性user，它会添加route.params为 props。
{
path: '/create',
name: 'create',
component: CreateComponent,
props: (route) => ({
user: userData,
...route.params
})
}
params passed in push will automatically be added to props.
push 中传入的参数会自动添加到 props 中。
self.$router.push({
name: 'create',
params: {
otherProp: {
"a": "b"
}
}
})
