我有以下小提琴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 second
self.$router.push({name: 'create', params: {otherProp: {"a":"b"}}}) //not ok result: User data: { "name": "username" }; other prop:
}
});
如您所见CreateComponent
,user
当我初始化路由时,我正转到。
稍后,我需要传递另一个属性,otherProp
并仍然保留user
参数。当我尝试执行此操作时,我发送的对象不会传递给组件。
如何通过otherProp
和仍然保留user
?
的真正目的otherProp
是用表单中的数据填充表单。在清单部分中,有一个对象,当我单击“编辑”按钮时,我想用清单中的数据填充表单。