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中传递。不在道具中。

如何通过“ this。$ router.push（）”传递道具对象

1 个答案: