Блог

Я использую vue-router 4 .

Я передал объект props из this.$router.push() . Но я получил только [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] <<<
  }
};
...
                              
  

https://router.vuejs.org/guide/essentials/passing-props.html «Когда props имеет значение true, route.params будет установлен в качестве компонента props».

Вы должны поставить props = true . Без этого ваши данные будут доставлены в $route.params.roomData . Не в реквизите.