How to pass data from one view to another with the vue-router

Question

When using the vue-router with .vue files, there is no documented way to pass data from one view/component to another.

Let's take the following setup...

main.js:

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

let routes = [
    {
        path: '/page1',
        component: require('./views/Posts.vue')
    },
    {
        path: '/page2',
        component: require('./views/EditPost.vue')
    }
];

let router = new VueRouter({
    routes
});

new Vue({
    el: '#main',
    router
});

Posts.vue:

<template>
    <div>
        Posts.vue passing the ID to EditPost.vue: {{ postId }}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                allPostsHere: // Whatever...
            }
        }
    }
</script>

EditPost.vue:

<template>
    <div>
        EditPost.vue received ID from Posts.vue: {{ receivedId }}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                receivedId: // This is where I need the ID from Posts.vue
            }
        }
    }
</script>

Please note: It is not possible to receive the ID directly from the EditPost.vue, because it has to be selected from Posts.vue.

Question: How can I pass the ID from one view/component to the other?

Answer 1

A route can only be accessed via a URL and a URL has to be something user can type into the URL bar, therefore to pass a variable from one view component to another you have to use route params.

I assume you have a list of posts in Posts component and want to change page to edit a specific post in EditPost component.

The most basic setup would be to add a link in the post list to redirect to the edit page:

<div v-for="post in posts">
    {{ post.title }}
    <router-link :to="'/post/' + post.id + '/edit'">Edit</router-link>
</div>

Your routes would look like this:

[
    {
        path: '/posts',
        component: require('./views/Posts.vue'),
    },
    {
        path: '/post/:postId/edit',
        component: require('./views/EditPost.vue'),
        props: true,
    },
]

The props configuration option is just to inform the Router to convert route params to component props. For more information see Passing props to route components.

Then in EditPost you'd accept the id and fetch the post from server.

export default {
    props: ['postId'],

    data() {
        return {
            post: null,
        }
    },

    mounted() {
        this.fetchPost();
    },

    methods: {
        fetchPost() {
            axios.get('/api/post/' + this.postId)
                 .then(response => this.post = response.data);
        },
    },
}

After the request has been completed, EditPost has its own copy which it can further process.

Note, that on every post edit and every time you enter the post list, you'll make a request to the server which in some cases may be unnecessary, because all needed information is already in the post list and doesn't change between requests. If you want to improve performance in such cases, I'd advise integrating Vuex into your app. If you decide to do so, the components would look very similar, except instead of fetching the post to edit via an HTTP request, you'd retrieve it from the Vuex store. See Vuex documentation for more information.

Answer 2

if you don't want the params appear in the URL bar,you can use window.sessionStorage, window.localStorage or vuex. Before you leave the view, set your parameters and get it after entering the new view.

Answer 3

You can use a prop on the <router-view :my-id="parentStoredId"></router-view> to pass down data present in the app.vue (main component). To change the parent data you need to emit a custom event comprising the value, from the childs (Posts.vue, EditPost.vue).

Another way is the Non Parent-Child Communication.

The way I prefer is Vuex. Even if it require you to learn the usage, it will repay back when the app grows.