Vue 3中如何通过Vue Router的push()方法传递对象作为Props？

阿华AIGC实验室

2026-4-28

在Vue 3中通过Vue Router传递对象作为Props的解决方案

当然可以！不过这里要注意Vue Router 4（适配Vue3的版本）和Vue Router 3（Vue2用的）在参数处理上的关键差异：Vue Router 4会强制将params中的非字符串/数字类型转为字符串，这就是你看到对象被序列化成"[object Object]"的原因——它本质上是为了符合URL参数只能是字符串的规范。

下面给你几个实用的解决方案，按需选择：

方案一：用`state`传递临时对象（推荐临时场景）

如果你的对象不需要在URL中显示，也不要求刷新页面后保留，用路由的state字段传递是最省心的——它是HTML5 History API的原生特性，专门用来存储路由跳转时的附加状态。

修改后的示例代码

const Home = { 
  template: '<div>Home</div>', 
  mounted() { 
    this.$router.push({ 
      name: "about", 
      params: { user: "User Name" },
      // 把对象放在state里
      state: { objectParam: {a: "a"} } 
    }) 
  } 
} 
const About = { 
  template: '<div>About</div>', 
  props: ['user', 'o', 'objectParam'], 
  mounted(){ 
    console.log( "Passed props:" ) 
    console.log( this.$props ) // 这里会拿到完整的objectParam对象
  } 
} 
const routes = [ 
  { path: '/', component: Home }, 
  { 
    path: '/about', 
    name:"about", 
    component: About, 
    props: route => {
      console.log("从state中获取原始对象:", route.state)
      return {
        o: {b: "b"}, 
        user: route.params.user,
        objectParam: route.state.objectParam
      }
    }
  }, 
] 
const router = VueRouter.createRouter({ 
  history: VueRouter.createWebHashHistory(), 
  routes, 
}) 
const app = Vue.createApp({}) 
app.use(router) 
app.mount('#app')

方案二：JSON序列化对象（适合需要URL保留的场景）

如果你希望对象参数能在URL中保留，刷新页面也不丢失，可以把对象序列化为JSON字符串传递，在目标路由中再解析回对象。

示例代码

const Home = { 
  template: '<div>Home</div>', 
  mounted() { 
    this.$router.push({ 
      name: "about", 
      params: { 
        user: "User Name", 
        // 对象转JSON字符串
        objectParam: JSON.stringify({a: "a"}) 
      } 
    }) 
  } 
} 
const About = { 
  template: '<div>About</div>', 
  props: ['user', 'o', 'objectParam'], 
  mounted(){ 
    console.log( "Passed props:" ) 
    console.log( this.$props ) // 这里的objectParam是解析后的对象
  } 
} 
const routes = [ 
  { path: '/', component: Home }, 
  { 
    path: '/about', 
    name:"about", 
    component: About, 
    props: route => {
      console.log("URL中的序列化字符串:", route.params.objectParam)
      return {
        o: {b: "b"}, 
        user: route.params.user,
        // 解析JSON字符串为对象
        objectParam: JSON.parse(route.params.objectParam)
      }
    }
  }, 
] 
// 后续router和app初始化代码和之前一致

注意：如果对象包含特殊字符，建议用encodeURIComponent和decodeURIComponent包裹，避免URL解析出错。

方案三：用状态管理库存储对象（适合复杂/全局共享场景）

如果你的对象比较复杂，或者需要在多个组件中共享，推荐用Pinia（Vue3官方推荐）或Vuex存储对象，路由只传递一个唯一标识（比如ID），目标组件通过标识从状态库中获取完整对象。这种方式还能配合持久化插件，实现刷新页面后数据不丢失。

简单思路示例

在Pinia中定义存储对象的store：

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () => ({
    userObjects: {}
  }),
  actions: {
    setUserObject(id, obj) {
      this.userObjects[id] = obj
    },
    getUserObject(id) {
      return this.userObjects[id]
    }
  }
})

在Home组件中存储对象并传递ID：

import { useUserStore } from '@/stores/user'
const Home = {
  mounted() {
    const userStore = useUserStore()
    const obj = {a: "a"}
    // 存储对象
    userStore.setUserObject('obj1', obj)
    // 路由传递ID
    this.$router.push({ name: "about", params: { user: "User Name", objId: 'obj1' } })
  }
}

在About组件中通过ID获取对象：

import { useUserStore } from '@/stores/user'
const About = {
  props: ['user', 'o', 'objId'],
  mounted() {
    const userStore = useUserStore()
    const objectParam = userStore.getUserObject(this.objId)
    console.log("从状态库获取的对象:", objectParam)
  }
}