Vue页面sendRedirect查询参数异常及服务器端跳转方案咨询

一、修复当前重定向的参数格式问题 #

你构造重定向URL时错误手动添加了%3D（等于号的URL编码），导致整个productId=Paco Rabane被识别为查询参数的键，而非正确的productId为键、Paco Rabane为值的结构。

修正方法1：直接构造编码后的参数 #

import {H3Event} from "h3";

export default defineEventHandler(async (event: H3Event) =>{
  try {
     const request = await readBody(event)
     console.log("Redirecting to products page", request)
     // 对参数值做URL编码，避免空格等特殊字符引发问题
     const encodedProductId = encodeURIComponent(request.productId)
     await sendRedirect(event, `/product?productId=${encodedProductId}`)
  } catch (error){
     console.log("Error", error)
  }
})

修正方法2：用URLSearchParams自动处理格式 #

这种方式更可靠，能自动处理多参数的编码和拼接：

import {H3Event} from "h3";

export default defineEventHandler(async (event: H3Event) =>{
  try {
     const request = await readBody(event)
     console.log("Redirecting to products page", request)
     const params = new URLSearchParams()
     params.append('productId', request.productId)
     await sendRedirect(event, `/product?${params.toString()}`)
  } catch (error){
     console.log("Error", error)
  }
})

修正后，在product.vue中通过route.query.productId就能正确获取到Paco Rabane。

二、sendRedirect的替代实现方案 #

如果需要传递大量数据、或不想将参数暴露在URL中，可以采用以下方式：

1. 服务器端会话存储 #

将POST请求中的数据存入服务器端会话（如Session），在目标页面的服务器端逻辑中读取并使用：

// /server/api/handle-products-ts
import {H3Event} from "h3";

export default defineEventHandler(async (event: H3Event) =>{
  try {
     const request = await readBody(event)
     // 将产品ID存入会话
     event.context.session.productId = request.productId
     await sendRedirect(event, '/product')
  } catch (error){
     console.log("Error", error)
  }
})

在product.vue中读取会话数据：

export default {
  async asyncData({ $session }) {
    const productId = $session.productId
    // 根据ID获取产品详情
    const product = await fetch('/api/get-product', {
      method: 'POST',
      body: JSON.stringify({ productId })
    }).then(res => res.json())
    // 用完清除会话中的临时数据
    $session.productId = null
    return { product }
  }
}

2. 临时Cookie存储 #

将少量非敏感数据加密后存入Cookie，目标页面读取解析后清除Cookie：

// /server/api/handle-products-ts
import {H3Event, setCookie} from "h3";

export default defineEventHandler(async (event: H3Event) =>{
  try {
     const request = await readBody(event)
     // 存入临时Cookie，设置较短有效期
     setCookie(event, 'tempProductId', encodeURIComponent(request.productId), {
       maxAge: 60, // 1分钟有效期
       path: '/product'
     })
     await sendRedirect(event, '/product')
  } catch (error){
     console.log("Error", error)
  }
})

在product.vue中读取：

const route = useRoute()
const cookie = useCookie('tempProductId')
const productId = decodeURIComponent(cookie.value)
// 获取产品详情后清除Cookie
cookie.value = null

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