Vue路由跳转时route.params未定义，如何隐式传递对象参数？

针对你遇到的问题——用params传复杂对象失效，且不想把数据暴露在URL里，下面是几种靠谱的解决办法：

1. 用状态管理工具（Pinia/Vuex）存数据 #

这是最稳妥的方案，尤其适合跨路由传递复杂数据：

• Homepage.vue 跳转逻辑：
  先把cve_obj存入状态仓库，再带cve_id做query跳转：

  // 以Pinia为例，先定义好仓库（比如stores/cve.js）
  import { useCveStore } from '@/stores/cve'
  const cveStore = useCveStore()
  
  onAboutClick(cve) {
    cveStore.saveCurrentCve(cve.cve_obj)
    this.$router.push({
      path: '/clickthru',
      query: { cve_id: cve.cve_id }
    })
  }
  

• clickthru.vue 获取数据：
  直接从仓库里取出对象即可：

  import { useCveStore } from '@/stores/cve'
  const cveStore = useCveStore()
  const cve_obj = cveStore.currentCve
  
  // 兜底处理：如果用户直接访问/clickthru，根据query的cve_id重新请求数据
  if (!cve_obj) {
    // 调用接口拉取对应cve_id的数据
  }
  

2. 利用history.state传递 #

Vue Router的push支持传入state参数，数据会存在浏览器历史栈里，不会出现在URL：

• Homepage.vue 跳转代码：

  onAboutClick(cve) {
    this.$router.push({
      path: '/clickthru',
      query: { cve_id: cve.cve_id },
      state: { cve_obj: cve.cve_obj }
    })
  }
  

• clickthru.vue 获取数据：

  mounted() {
    // Vue2 直接取window.history.state
    const cve_obj = window.history.state?.cve_obj
    // Vue3 也可以用router的currentRoute
    // const cve_obj = this.$router.currentRoute.value.state?.cve_obj
  }
  

⚠️ 注意：刷新页面后history.state会丢失，所以必须做兜底——比如根据query里的cve_id重新请求数据。

为什么之前的params方式没用？ #

你之前用params传对象失效，原因有两个：

• 用path跳转时，Vue Router会忽略params参数，只有用name跳转（比如this.$router.push({name: 'Clickthru', params: {...}})）才会生效；
• 就算用name传params，复杂对象会被自动序列化，刷新页面后params会丢失，而且序列化/反序列化过程可能导致数据损坏，官方不推荐这么做。

内容的提问来源于stack exchange，提问作者abadawi