[英]Vue.js, pass data to component on another route
Simple task to pass data from one page to another made a real headache to newbie in Vue.js Here is my router将数据从一个页面传递到另一个页面的简单任务让 Vue.js 中的新手非常头疼 这是我的路由器<\/a>
I'm rendering a form on "\/" page, which make an API request,我正在“\/”页面上呈现一个表单,它发出一个 API 请求, <\/a>
and I just want to pass data to another route page with another component我只想用另一个组件将数据传递到另一个路由页面<\/a>
" As Antony said, since you've already enabled props in router/index.js
, you can pass parameters in router.push
like this: 正如Antony所说,既然你已经在router/index.js
启用了props,你可以在router.push
传递参数,如下所示:
router.push({
name: 'events',
params: {
items: data
}
});
then you will be able to receive items
as props in EventsDisplay.vue
然后,您将能够在EventsDisplay.vue
接收items
作为道具
export default {
name: 'eventsDisplay',
props: ['items'],
};
If you want to save it globally, you could use an event bus or a VueX store to contain it, then save and load it from this event bus or store when you need to access it. 如果要全局保存,可以使用事件总线或VueX存储来包含它,然后在需要访问它时从此事件总线或存储中保存并加载它。
If you want to pass it between those two components only, and only when accessing the second page from the first one, you can pass properties to the route argument as per this guide: https://router.vuejs.org/en/essentials/passing-props.html 如果只想在这两个组件之间传递它,并且仅在从第一个组件访问第二个页面时,可以按照本指南将属性传递给路由参数: https : //router.vuejs.org/en/essentials /passing-props.html
Try using Vuex 尝试使用Vuex
In Source Component 在源组件中
this.$store.commit('changeDataState', this.$data);
this.$router.push({name: 'user-post-create'});
In Destination Component 在目标组件中
created () {
console.log('state', this.$store);
this.$store.getters.Data;
}
Add props true in your vue router在你的 Vue 路由器中添加 props true
{
path: "/pay-now",
name: "pay",
props: true,
component: () =>
import(/* webpackChunkName: "about" */ "../components/account/pay.vue"),
beforeEnter: AuthGuard,
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.