如何使用 vue-router 将数据从一个视图传递到另一个视图

当使用vue-router with .vue文件中，没有记录的方法将数据从一个视图/组件传递到另一个视图/组件。

让我们进行以下设置...

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
});

帖子.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>

请注意: 无法直接从EditPost.vue，因为它必须选自Posts.vue.

Question：如何将 ID 从一个视图/组件传递到另一个视图/组件？

路由只能通过 URL 访问，并且 URL 必须是用户可以在 URL 栏中输入的内容，因此要将变量从一个视图组件传递到另一个视图组件，您必须使用路由参数 https://router.vuejs.org/guide/essentials/dynamic-matching.html#dynamic-route-matching.

我假设你有一个帖子列表Posts组件并想要更改页面以编辑特定帖子EditPost成分。

最基本的设置是在帖子列表中添加一个链接以重定向到编辑页面：

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

您的路线将如下所示：

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

The props配置选项只是通知 Router 将路由参数转换为组件属性。欲了解更多信息，请参阅将 props 传递给路由组件 https://router.vuejs.org/guide/essentials/passing-props.html#passing-props-to-route-components.

Then in EditPost您将接受该 ID 并从服务器获取该帖子。

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);
        },
    },
}

请求完成后，EditPost有自己的副本，可以进一步处理。

请注意，在每次编辑帖子和每次进入帖子列表时，您都会向服务器发出请求，这在某些情况下可能是不必要的，因为所有需要的信息已经在帖子列表中，并且在请求之间不会更改。如果您想在这种情况下提高性能，我建议将 Vuex 集成到您的应用程序中。 如果您决定这样做，组件看起来会非常相似，只不过您不是通过 HTTP 请求获取帖子进行编辑，而是从 Vuex 存储中检索它。看Vuex 文档 https://vuex.vuejs.org/en/了解更多信息。