如何使用vue路由器将数据从一个视图传递到另一个视图

当使用vue-router和.vue文件时，没有文档化的方式将数据从一个视图/组件传递到另一个视图/组件。如何使用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从一个视图/组件传递给另一个？

来源

2017-08-16 Thomas Tesla

你尝试过吗？ https://github.com/vuejs/vue-router/blob/dev/docs/en/essentials/passing-props.md – Pradeepb

是的，你可以看到你的例子从url/route获取ID。这不是我需要的。 –

上面链接的内容几乎完全符合您的需求。你可以定义你的路由来接受一个参数，或者用道具设置为true来以编程方式推送它。 – Bert

路由只能通过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。

来源

2017-08-16 23:06:50

“只能通过URL访问路由并且URL必须是用户可以在URL栏中键入的内容”这绝对不是真的。请参阅[程序化导航]（https://router.vuejs.org/en/essentials/navigation.html）。 – Bert

我不确定你的意思。如果您提到通过名称访问路线的可能性，那么它只是网址的快捷方式，所以如果您决定更改URL路线，则无需记住它或将其全部更改为全部。 –

如果你不想让PARAMS出现在URL栏中，你可以使用window.sessionStorage，window.localStorage或者vuex。在您离开视图之前，请设置您的参数并在进入新视图后获取。

来源

2017-08-17 01:53:41 Zany

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

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

我更喜欢的方式是Vuex。即使它需要您了解使用情况，它也会在应用程序增长时偿还。

来源

2017-08-17 07:21:23 itacode

如何使用vue路由器将数据从一个视图传递到另一个视图

回答

相关问题