Vue路由URL中百分号（%）的移除方法

AI 小北

2026-4-13

兄弟，你这问题我太熟了！你看到URL里的%25其实是百分号%的URL编码结果，说白了就是你的商品标题被重复编码了——原本的空格被转成%20，结果又被编码了一次，%就变成了%25，所以才会出现%2520这种奇怪的组合。下面给你几个实用的解决办法：

先解码再传递参数
先检查你拿到的productTitle是不是已经被编码过了，如果是，先用decodeURIComponent()把它还原成原始字符串，再传给路由：

goToProduct(productTitle) {
  // 解码可能被重复编码的标题，还原成原始内容
  const decodedTitle = decodeURIComponent(productTitle);
  console.log("解码后的商品标题:", decodedTitle);
  this.$router.push({
    name: "ProductDetails",
    params: { title: decodedTitle }
  });
}

自定义标题格式化，生成友好URL
如果想彻底避免URL里出现编码字符，你可以把标题里的特殊字符（空格、单引号这类）替换成URL友好的格式，比如把空格换成连字符，去掉多余特殊字符：
先写个工具函数处理标题，再用处理后的结果传参：

// 定义一个格式化标题的工具函数
function formatUrlFriendlyTitle(title) {
  return title
    .toLowerCase() // 转成小写，URL更规范
    .replace(/\s+/g, '-') // 把所有空格换成连字符
    .replace(/[^\w\-]+/g, '') // 去掉单引号这类非必要特殊字符
    .replace(/\-\-+/g, '-'); // 把连续的多个连字符换成单个
}

goToProduct(productTitle) {
  const friendlyTitle = formatUrlFriendlyTitle(productTitle);
  console.log("适合URL的标题:", friendlyTitle);
  this.$router.push({
    name: "ProductDetails",
    params: { title: friendlyTitle }
  });
}