Vue

by Jacob Goh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<div id="app">
  <router-view></router-view>
</div>

Vue

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: (route) => ({
                    user: userData,
                    ...route.params
                })
            },
            {
                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',
            params: {
                otherProp: {
                    "a": "b"
                }
            }
        })
    }
});