У меня есть компонент с объектом «project_element», и я хочу передать объект другому компоненту через «vue-router».

Это код из моего первого компонента, который открывает второй компонент, если пользователь нажимает кнопку.

{amp}lt;router-link :to="{ name: 'project', params: { project_url: project_element.project_name, project_element: project_element} }"{amp}gt; {amp}lt;b-button{amp}gt; Open {amp}lt;/b-button{amp}gt; {amp}lt;/router-link{amp}gt; 

Это код моего Vue Router в index.js

 { path: '/projects/:project_url', component: SingleProjectViewApp, name: 'project', props: { project_element: project_element } }, 

Мне уже удалось установить «project_element.project_name» в URL, но мне также нужен сам «project_element» во втором компоненте.

В compenent я установил объект в «разделе реквизита»

 props: { project_element: { type: Object, required: true } }, 

Проблема в Vue Router, я не могу передать project_element как переменную, только с кавычками. Но тогда я получаю ошибку, потому что, очевидно, компонент ожидал объект, а не строку.

Спасибо за вашу помощь!

Попробуйте это в вашем роутере

 path: '/projects/:project_url?', component: SingleProjectViewApp, props(route) { const props = { projectElement: route.params.project_url }; return props; } 

и в ваших реквизитах измените «project_element» на «projectElement» (обычно вы хотите сделать верблюжий случай в vue props)

 props: { projectElement: { type: Object, required: true } }, 

Первое, что мне пришло в голову, это JSON.stringify() и JSON.parse() . Хотя я не уверен, что это идеальное решение.

В любом случае попробуйте это:

 {amp}lt;router-link :to="{ name: 'project', params: { project_url: project_element.project_name, project_element: JSON.stringify(project_element)} }"{amp}gt; {amp}lt;b-button{amp}gt; Open {amp}lt;/b-button{amp}gt; {amp}lt;/router-link{amp}gt; 
 // 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 {amp}amp; inject — все это будет лучше для такой работы.

 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)