如何使用“this.$router.push()”传递 props 对象

Question

我正在使用

vue-router 4

。

我从

this.$router.push()

传递了 props 对象。但是，当我打印出来时，我只得到了

[object Object]

作为

String

。

我怎样才能得到以下结果

Object

？

{
    roomDimension: {
        width: 15,
        length: 20,
    }
}

>>> in package.json
++++++++++++++++++++++++++++++
...
 "vue-router": "4.0.0-rc.1"
...
++++++++++++++++++++++++++++++

>>> in router/index.js
++++++++++++++++++++++++++++++
import { createWebHistory, createRouter } from "vue-router";
import UploadRoom from "../views/UploadRoom.vue";
import EditRoom from "../views/EditRoom.vue";

const routes = [
...
  {
    path: "/upload-room",
    name: "UploadRoom",
    component: UploadRoom,
  },
  {
    path: "/edit-room",
    name: "EditRoom",
    component: EditRoom,
    props: true,
  },
...
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

++++++++++++++++++++++++++++++

>>> in UploadRoom.vue
++++++++++++++++++++++++++++++
...
this.$router.push({
  name: "EditRoom",
  props: {
    roomData: {
      roomDimension: {
        width: 15,
        length: 20,
      },
    },
  },
});
...
++++++++++++++++++++++++++++++

>>> in EditRoom.vue
++++++++++++++++++++++++++++++
...
import Model from "../components/Model.vue";

export default {
  name: "EditRoom",
  components: {
    Model,
  },
  props: {
    roomData: {
      type: Object, 
      required: true,
    }
  },
  data() {
    return {
      // 
    };
  },
  created() {
    console.log(this.roomData)
    // got like this >>> [object Object] <<<
  }
};
...
++++++++++++++++++++++++++++++

Answer 1

https://router.vuejs.org/guide/essentials/passing-props.html “当 props 设置为 true 时，route.params 将被设置为组件 props。”

你必须设置 props = true。如果没有它，您的数据将在 $route.params.roomData 中传递。不在道具中。

Answer 2

回复晚了，我正在将应用程序从 Vue 2 迁移到 3，并且遇到了同样的问题。我更新到了 vue-router 的最新版本，并从 CHANGELOG:

找到了下一个版本

如果您依赖传递未定义为路径一部分的参数，例如：定义如下路线：

{
  path: '/somewhere',
  name: 'somewhere'
}

并使用人工参数进行推送：

router.push({ name: 'somewhere', params: { oops: 'gets removed' } })

此更改会破坏您的应用程序。这种行为在某些情况下有效，但多年来一直被建议不要这样做，因为出于多种原因，它是路由中的反模式，其中之一是重新加载页面会丢失参数。幸运的是，这种反模式有多种替代方案：

• 将数据放入 pinia 等存储中：如果数据跨多个页面使用，则这是相关的
• 通过在路由路径上定义数据或将其作为查询参数传递，将数据移动到实际参数：如果您有适合 URL 的小数据片段，并且在重新加载页面时应保留这些数据，则这是相关的
• 将数据作为状态传递以将其保存到 History API 状态
• 在导航守卫期间将其作为新属性传递给 to.meta

我的解决方案是把它放在商店里。