Vue - 通过路由器将道具传递给组件答案

【问题标题】：Vue - pass prop via router to componentVue - 通过路由器将道具传递给组件
【发布时间】：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，只能用引号。但后来我得到一个错误，因为显然组件需要一个对象而不是字符串。

感谢您的帮助！

【问题讨论】：

标签： javascript vue.js vue-component vue-router router

【解决方案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)

【讨论】：