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”本身。

在组件中，我已在“道具部分”中设置了对象

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

问题出在Vue路由器中，我不能像只传递带引号的变量一样传递project_element。但是然后我得到一个错误，因为很明显该组件期望一个对象而不是一个字符串。

感谢您的帮助！

Answer 1

在路由器中尝试

napi-5

然后在道具中将“ project_element”更改为“ projectElement”（通常要在vue道具中进行驼峰式保护）

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

      return props;
    }

Answer 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都将更好地进行此类工作。

Answer 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-通过路由器将道具传递到组件

3 个答案: