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

【问题标题】：How to pass data from one view to another with the vue-router如何使用 vue-router 将数据从一个视图传递到另一个视图
【发布时间】：2018-01-25 02:07:32
【问题描述】：

当使用 vue-router 和 .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
});

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>

请注意：不能直接从EditPost.vue接收ID，因为必须从Posts.vue中选择。

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

【问题讨论】：

你试过了吗？ github.com/vuejs/vue-router/blob/dev/docs/en/essentials/…
是的，您可以看到您的示例从 url/route 获取 ID。这不是我需要的。
上面链接的内容几乎正是您所需要的。你可以定义你的路由来接受一个参数，或者在 props 设置为 true 的情况下以编程方式推送它。

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

只能通过 URL 访问路由，并且 URL 必须是用户可以在 URL 栏中键入的内容，因此要将变量从一个视图组件传递到另一个视图组件，您必须使用 route params。

我假设您在 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,
    },
]

props 配置选项只是通知路由器将路由参数转换为组件道具。如需更多信息，请参阅Passing props to route components。

然后在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 documentation 了解更多信息。

【讨论】：

“路由只能通过 URL 访问，并且 URL 必须是用户可以在 URL 栏中键入的内容”绝对不是真的。见programmatic navigation。
我不确定你的意思。如果您提到通过名称访问路由的可能性，它只是 URL 的快捷方式，因此如果您决定更改 URL 路由，则无需记住它或在整个应用程序中更改它。
前两个链接似乎已损坏，是否有更当前的页面可以链接到？

【解决方案2】：

如果不希望参数出现在 URL 栏中，可以使用 window.sessionStorage、window.localStorage 或 vuex。离开视图前，设置好参数，进入新视图后获取。

【讨论】：

【解决方案3】：

您可以使用<router-view :my-id="parentStoredId"></router-view> 上的道具来传递 app.vue（主要组件）中存在的数据。要更改父数据，您需要从子数据（Posts.vue、EditPost.vue）发出包含值的custom event。

另一种方式是Non Parent-Child Communication。

我更喜欢的方式是Vuex。即使它需要你学习使用，它会随着应用程序的发展而回报。

【讨论】：