title: How to pass an object as props with vue router?
body: <p>I have the following fiddle <a href="https://jsfiddle.net/91vLms06/1/" rel="noreferrer">https://jsfiddle.net/91vLms06/1/</a></p>
  
  <pre><code>const CreateComponent = Vue.component('create', {
    props: ['user', 'otherProp'],
    template: '&lt;div&gt;User data: {{user}}; other prop: {{otherProp}}&lt;/div&gt;'
  });
  
  const ListComponent = Vue.component('List', {
    template: '&lt;div&gt;Listing&lt;/div&gt;'
  });
  
  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:
    }
  });
  </code></pre>
  
  <p>As you can see first I am passing to <code>CreateComponent</code> the <code>user</code> just when I initialize the route.</p>
  
  <p>Later I need to pass another property <code>otherProp</code> and still keep the <code>user</code> parameter. When I try to do this the object I send is not passed to the component.</p>
  
  <p>How can I pass the <code>otherProp</code> and still keep the <code>user</code>?</p>
  
  <p>The real purpose of the <code>otherProp</code> is 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.</p>