如何使用 vue-router 将数据从一个视图传递到另一个视图 [英] How to pass data from one view to another with the vue-router
问题描述
当将 vue-router 与 .vue 文件一起使用时，没有记录的方法可以将数据从一个视图/组件传递到另一个视图/组件.
让我们进行以下设置...
main.js:
从'vue'导入Vue；从 'vue-router' 导入 VueRouter；Vue.use(VueRouter);让路线= [{路径:'/page1'，组件:需要('./views/Posts.vue')},{路径:'/page2'，组件:需要('./views/EditPost.vue')}];让路由器 = 新的 VueRouter({路线});新的 Vue({el: '#main',路由器});Posts.vue:
<div>Posts.vue 将 ID 传递给 EditPost.vue:{{ postId }}</模板><脚本>导出默认{数据() {返回 {allPostsHere://随便...}}}
EditPost.vue:
<div>EditPost.vue 从 Posts.vue 收到 ID:{{ receivedId }}</模板><脚本>导出默认{数据() {返回 {receivedId://这是我需要来自 Posts.vue 的 ID}}}
请注意:不能直接从 EditPost.vue 接收 ID，因为它必须从 Posts.vue 中选择代码>.
问题:如何将 ID 从一个视图/组件传递到另一个视图/组件?
路由只能通过 URL 访问，并且 URL 必须是用户可以输入到 URL 栏中的内容，因此要从一个视图组件传递变量另一个你必须使用 路由参数.
我假设您在 Posts 组件中有一个帖子列表，并且想要更改页面以编辑 EditPost 组件中的特定帖子.
最基本的设置是在帖子列表中添加一个链接以重定向到编辑页面:
{{ 帖子标题 }}<router-link :to="'/post/' + post.id + '/edit'">编辑</router-link>您的路线如下所示:
<预><代码>[{路径:'/帖子'，组件:需要('./views/Posts.vue')，},{路径:'/post/:postId/edit',组件:需要('./views/EditPost.vue')，道具:真实，},]props 配置选项只是通知路由器将路由参数转换为组件道具.有关更多信息，请参阅将道具传递给路由组件.
然后在 EditPost 中，您将接受 id 并从服务器获取帖子.
出口默认{道具:['postId']，数据() {返回 {帖子:空，}},安装(){this.fetchPost();},方法: {fetchPost() {axios.get('/api/post/' + this.postId).then(response => this.post = response.data);},},}请求完成后，EditPost 有自己的副本，可以进一步处理.
请注意，在每次编辑帖子和每次进入帖子列表时，您都会向服务器发出请求，这在某些情况下可能是不必要的，因为所有需要的信息都已在帖子列表中，并且不会请求之间的变化.如果您想在这种情况下提高性能，我建议将 Vuex 集成到您的应用程序中.如果您决定这样做，组件看起来非常相似，除了不是通过 HTTP 请求获取要编辑的帖子，而是从 Vuex 商店检索它.有关详细信息，请参阅 Vuex 文档.
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?
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.
这篇关于如何使用 vue-router 将数据从一个视图传递到另一个视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
