Vue+Ionic路由跳转对象类型Props传递为空问题求助

问题原因 #

你遇到的问题核心在于Vue Router的params无法直接传递复杂对象：

• 使用createWebHistory（HTML5历史模式）时，路由params会被尝试序列化为URL的一部分，对象会被转成字符串[object Object]，实际传递时数据完全丢失，导致目标页面接收为空对象。
• 你的路由配置未为ObjectPage设置参数接收规则，组件声明的props无法自动关联路由参数。

解决方案 #

方法一：用路由state传递对象（推荐）

state是HTML5 History API的特性，数据存在浏览器历史记录中，不会暴露在URL里，适合传递复杂对象。

1. 修改WorklistPage的跳转逻辑：

methods: {
    showDetails(row) {
        this.$router.push({
            name: "ObjectPage",
            state: { rowData: row } // 替换params为state
        });
    }
}

2. 修改ObjectPage接收数据：
   不再通过props接收，直接从路由的state中读取：

export default {
    name: "ObjectPage",
    components: {
        // 你的组件声明
    },
    data() {
        return {
            rowData: {}
        };
    },
    mounted() {
        if (this.$route.state?.rowData) {
            this.rowData = this.$route.state.rowData;
        }
    }
};

方法二：序列化对象为JSON字符串传递（适合URL需携带数据的场景）

如果需要URL中保留数据，可将对象转成JSON字符串，目标页面再解析还原。

1. 修改WorklistPage的跳转逻辑：

methods: {
    showDetails(row) {
        this.$router.push({
            name: "ObjectPage",
            params: { rowData: JSON.stringify(row) }
        });
    }
}

2. 更新路由配置：
   为ObjectPage添加参数占位符，并在props中解析JSON：

const routes: Array<RouteRecordRaw> = [
    // 其他路由
    {
        path: '/objectPage/:rowData', // 添加参数占位符
        name: 'ObjectPage',
        component: ObjectPage,
        props: route => ({
            rowData: JSON.parse(route.params.rowData) // 解析为对象
        })
    }
]

3. ObjectPage的props配置保留原样：

props: {
    rowData: Object
}

额外提示 #

• 避免用index作为v-for的key，建议使用每个对象的唯一标识（如row.id），防止列表更新时出现渲染异常。
• 若使用state传参，页面刷新后state会丢失，如需刷新后保留数据，可结合本地存储（localStorage/sessionStorage）或从接口重新获取数据。

内容的提问来源于stack exchange，提问作者Merve Gül