如何使用 vue 路由器将对象作为道具传递？

Question

我有以下fiddlehttps://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:
  }
});

正如你首先看到的，我在初始化路由时将 CreateComponent 传递给 user。

稍后我需要传递另一个属性 otherProp 并且仍然保留 user 参数。当我尝试这样做时，我发送的对象没有传递给组件。

如何通过 otherProp 并保持 user？

otherProp 的真正目的是用其中的数据填写表格。在清单部分，我有对象，当我单击 "edit" 按钮时，我想用来自清单的数据填充表单。

Answer 1

它可以通过使用 props's Function mode 和 params

来工作

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

添加路由时，使用props's Function mode，这样它就有一个默认的属性 user，它会添加route.params作为props。

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

push传入的params会自动添加到props中

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

Answer 2

这是我使用路由器发送对象的简单解决方案。

this.$router.push({
 name: 'someName'
 params: {
  obj: {...someObject}
 },
});

如果你想在下一页中使用obj。您可以在下面获取数据。

this.$route.params.obj

如何使用 vue 路由器将对象作为道具传递？

How to pass an object as props with vue router?

javascript

vue.js

vue-router

vuejs2