Vue - 通过路由器将道具传递给组件
Posted
技术标签:
【中文标题】Vue - 通过路由器将道具传递给组件【英文标题】:Vue - pass prop via router to component 【发布时间】:2020-04-03 22:52:21 【问题描述】:我有一个带有对象“project_element”的组件,我想通过“vue-router”将该对象传输到另一个组件。
这是我的第一个组件的代码,如果用户单击按钮,它会打开第二个组件。
<router-link :to=" name: 'project', params: project_url: project_element.project_name, project_element: project_element ">
<b-button> Open </b-button>
</router-link>
这是我的 Vue Router 在 index.js 中的代码
path: '/projects/:project_url',
component: SingleProjectViewApp,
name: 'project',
props: project_element: project_element
,
我已经设法将“project_element.project_name”设置为 url,但我的第二个组件中还需要“project_element”本身。
在组件中,我已经在“道具部分”中设置了对象
props:
project_element:
type: Object,
required: true
,
问题出在Vue Router,我不能像变量一样传递project_element,只能用引号。但后来我得到一个错误,因为显然组件需要一个对象而不是字符串。
感谢您的帮助!
【问题讨论】:
【参考方案1】:在你的路由器上试试这个
path: '/projects/:project_url?',
component: SingleProjectViewApp,
props(route)
const props =
projectElement: route.params.project_url
;
return props;
并在你的道具中将“project_element”更改为“projectElement”(通常你想在vue道具中做骆驼案例)
props:
projectElement:
type: Object,
required: true
,
【讨论】:
【参考方案2】:我首先想到的是JSON.stringify()
和JSON.parse()
。虽然我不确定这是一个完美的解决方案。
随便试试这个:
<router-link :to=" name: 'project', params: project_url: project_element.project_name, project_element: JSON.stringify(project_element) ">
<b-button> Open </b-button>
</router-link>
// router.js
path: '/projects/:project_url',
component: SingleProjectViewApp,
name: 'project',
props(route)
return
project_element: JSON.parse(route.params.project_element),
,
注意:老实说,我认为这是一种反模式,您应该使用不同的方法通过组件进行通信。 custom-events
、centralized-state
、event-bus
甚至 provide & inject
都会更适合这种工作。
【讨论】:
老实说,我认为这是一种反模式,您可能应该使用不同的方法来通过组件进行通信。我说的是custom-events
、centralized-state
、event-bus
甚至provide & inject
会更好。【参考方案3】:
routes: [
path: '/',
name: 'start',
component: Start,
meta:
my_data: "my data here",
,
,]
获取组件内部的数据
this.$route.currentRoute.meta.my_data
更新
this.$route.push("/"+ JSON.stringify(data) )
routes: [
path: '/:data',
name: 'start',
component: Start,
,]
获取组件内部的数据
JSON.parse(this.$route.params.data)
【讨论】:
以上是关于Vue - 通过路由器将道具传递给组件的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Vue.js 路由器将状态和事件处理程序作为道具传递给子组件?
当路由器在 vuejs2.0 中更改时,vue-route 将不同的道具传递给不同的视图组件?
在 react-router v4 中将自定义道具传递给路由器组件