Vue中页面刷新丢失router路由传参数据的解决方案咨询

问题根源 #

你当前使用的是Vue Router的隐式params传参，这类参数仅存在于内存的路由状态中，没有持久化到URL上。页面刷新时浏览器重新加载路由，内存中的路由状态清空，params自然就丢失了。同时你的路由配置中/productinfo的路径没有预留参数占位符，也不支持参数持久化到URL。

可行解决方案 #

方案1：URL参数+内存缓存（推荐，综合成本最低） #

无需本地持久化存储，仅首次加载对应产品时请求后端，后续刷新/重复访问都走缓存：

1. 修改跳转逻辑，仅传递唯一产品ID到URL query：

seeTheProduct(product) {
  this.$router.push({
    name: 'productinfo',
    query: { productId: product.id } // 假设product存在唯一id字段
  })
}

2. 详情页增加缓存逻辑，避免重复请求后端：

// 全局产品缓存，页面关闭自动清空，不会持久化
const productCache = {}

created() {
  const productId = this.$route.query.productId
  // 优先读缓存
  if (productCache[productId]) {
    this.product = productCache[productId]
  } else {
    // 仅首次加载请求后端，拿到结果存入缓存
    fetchProductById(productId).then(res => {
      this.product = res
      productCache[productId] = res
    })
  }
}

方案2：动态路由序列化传参（完全无需请求后端） #

如果确定不想请求后端，可以把产品对象序列化后放到路由路径中，刷新不会丢失：

1. 先修改router.js中的productinfo路由配置，增加动态参数占位：

{
  // :productData为参数占位，?表示参数可选，避免无参数直接访问时404
  path: "/productinfo/:productData?",
  name: "productinfo",
  component: () => import("../views/ProductInfo.vue"),
}

2. 跳转时序列化产品对象：

seeTheProduct(product) {
  this.$router.push({
    name: 'productinfo',
    params: { 
      productData: encodeURIComponent(JSON.stringify(product)) 
    }
  })
}

3. 详情页反序列化拿到数据：

created() {
  if (this.$route.params.productData) {
    this.product = JSON.parse(decodeURIComponent(this.$route.params.productData))
  } else {
    // 兜底逻辑：参数异常时跳回产品列表
    this.$router.push({name: 'products'})
  }
}

方案3：sessionStorage存储（改造成本最低） #

你之前嫌弃localStorage持久化不符合需求，sessionStorage是会话级存储，页面关闭后自动清空，完全满足非持久化要求：

1. 跳转时存入sessionStorage：

seeTheProduct(product) {
  sessionStorage.setItem('currentProduct', JSON.stringify(product))
  this.$router.push({ name: 'productinfo' })
}

2. 详情页读取：

created() {
  const productStr = sessionStorage.getItem('currentProduct')
  if (productStr) {
    this.product = JSON.parse(productStr)
  } else {
    // 兜底逻辑：参数异常时跳回产品列表
    this.$router.push({name: 'products'})
  }
}

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