javascript - Vue - 通过路由器将 Prop 传递给组件

Question

我有一个带有对象“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”本身。

在组件中，我在“ Prop 部分”中设置了对象

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

问题出在Vue Router中，我不能像变量一样传递project_element，只能用引号引起来。但是后来我得到一个错误，因为显然组件需要一个对象而不是一个字符串。

谢谢你的帮助!

Answer 1

在你的路由器上试试这个

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

      return props;
    }

并在你的 Prop 中将“project_element”更改为“projectElement”(通常你想在 vue props 中做驼峰式)

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