vue路由器传递对象作为道具

Question

我有以下小提琴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是用一个表格填充表格.在列表部分我有对象,当我单击编辑按钮时,我想用来自列表的数据填充表单.

Answer 1

它可以使用道具的功能模式和params

演示:https://jsfiddle.net/jacobgoh101/mo57f0ny/1/

添加路线时,使用道具的功能模式,使其具有默认属性user,并添加route.params为道具.

{
    path: '/create',
    name: 'create',
    component: CreateComponent,
    props: (route) => ({
        user: userData,
        ...route.params
    })
}

在推送中传递的参数将自动添加到道具中.

self.$router.push({
    name: 'create',
    params: {
        otherProp: {
            "a": "b"
        }
    }
})