[英]How to pass an object as props with vue router?
I have the following fiddle https://jsfiddle.net/91vLms06/1/我有以下小提琴https://jsfiddle.net/91vLms06/1/
const CreateComponent = Vue.component('create', {
props: ['user', 'otherProp'],
template: '<div>User data: {{user}}; other prop: {{otherProp}}</div>'
});
const ListComponent = Vue.component('List', {
template: '<div>Listing</div>'
});
const app = new Vue({
el: '#app',
router: new VueRouter(),
created: function () {
const self = this;
// ajax request returning the user
const userData = {'name': 'username'}
self.$router.addRoutes([
{ path: '/create', name: 'create', component: CreateComponent, props: { user: userData }},
{ path: '/list', name: 'list', component: ListComponent },
{ path: '*', redirect: '/list'}
]);
self.$router.push({name: 'create'}); // ok result: User data: { "name": "username" }; other prop:
self.$router.push({name: 'list'}); // ok result: Listing
// first attempt
self.$router.push({name: 'create', props: {otherProp: {"a":"b"}}}) // not ok result: User data: { "name": "username" }; other prop:
self.$router.push({name: 'list'}); // ok result: Listing
// second attempt
self.$router.push({name: 'create', params: {otherProp: {"a":"b"}}}) //not ok result: User data: { "name": "username" }; other prop:
}
});
As you can see first I am passing to CreateComponent
the user
just when I initialize the route.正如您首先看到的,我在初始化路由时将
user
传递给CreateComponent
。
Later I need to pass another property otherProp
and still keep the user
parameter.稍后我需要传递另一个属性
otherProp
并仍然保留user
参数。 When I try to do this the object I send is not passed to the component.当我尝试这样做时,我发送的 object 没有传递给组件。
How can I pass the otherProp
and still keep the user
?我怎样才能通过
otherProp
并仍然保留user
?
The real purpose of the otherProp
is to fill a form with the data from it. otherProp
的真正目的是用它的数据填充表单。 In the listing part I have the object and when I click the "edit" button I want to populate the form with the data that comes from the listing.在清单部分,我有 object,当我单击“编辑”按钮时,我想用来自清单的数据填充表单。
It can work by using props's Function mode and params
它可以通过使用props 的 Function 模式和
params
demo: https://jsfiddle.net/jacobgoh101/mo57f0ny/1/演示: https : //jsfiddle.net/jacobgoh101/mo57f0ny/1/
when adding routes, use props's Function mode so that it has a default property user
and it will add route.params
as props.添加路由时,使用props 的 Function 模式,这样它就有一个默认的属性
user
,它会添加route.params
作为 props。
{
path: '/create',
name: 'create',
component: CreateComponent,
props: (route) => ({
user: userData,
...route.params
})
}
params passed in push will automatically be added to props. push 中传入的参数会自动添加到 props 中。
self.$router.push({
name: 'create',
params: {
otherProp: {
"a": "b"
}
}
})
Here's my simple solution to send object using Router.这是我使用路由器发送对象的简单解决方案。
this.$router.push({
name: 'someName'
params: {
obj: {...someObject}
},
});
And if you want to use obj in the next page.如果您想在下一页中使用 obj。 You Can get data below.
您可以在下面获取数据。
this.$route.params.obj
I'm using the following setup in Vue Router 4 and Vue 3 and Composition API:我在 Vue Router 4 和 Vue 3 以及 Composition API 中使用以下设置:
In the router, define your route like:在路由器中,定义您的路线,如:
{ name: 'someroute', path: 'someroute?id=:id&name=:name`, component: [YourComponentNameHere], props: true, }
In the sender component:在发件人组件中:
router.push('someroute', params: { id: 1, name: 'John' } })
In the receiver component, access them using:在接收器组件中,使用以下方式访问它们:
router.currentRoute.value.params.id router.currentRoute.value.params.name
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.