如何配置Vue Router动态路由参数替换URL空格生成友好路径

核心逻辑：从参数传递源头把空格替换为横杠，在参数使用环节做反向还原，就能在不改动原有业务逻辑、不影响路由功能的前提下，实现地址栏无百分号编码的友好展示。

具体实现步骤 #

• 跳转阶段替换参数格式
  所有触发ItemListByBox路由跳转的逻辑里，在传入idBox参数前，先把字符串内的全部空格替换为横杠。例如原有跳转代码：

  // 原有跳转逻辑，currentBox.rawId 的值为 "Box 2"
  router.push({
    name: 'ItemListByBox',
    params: { idBox: currentBox.rawId }
  })
  

  修改为：

  router.push({
    name: 'ItemListByBox',
    params: { 
      // 将 "Box 2" 替换为 "Box-2"，作为路由参数传入
      // 低版本环境可替换为正则写法: currentBox.rawId.replace(/\s/g, '-')
      idBox: currentBox.rawId.replaceAll(' ', '-') 
    }
  })
  

  调整后路由生成的URL会直接变为http://localhost:8080/box/Box-2，不会触发浏览器对空格的%20编码逻辑。

• 目标页面反向还原真实ID
  在ItemListByBox组件内，拿到路由传入的idBox参数后，把横杠还原为空格，得到原始的boxID后再拉取对应盒子的物品数据即可：

  // 从路由拿到的参数值为 "Box-2"
  const pathParam = route.params.idBox
  // 还原为原始的 "Box 2"，用这个值请求对应盒子的物品数据
  // 低版本环境可替换为正则写法: pathParam.replace(/-/g, ' ')
  const realBoxId = pathParam.replaceAll('-', ' ')
  fetchBoxItems(realBoxId)
  

进阶优化 #

如果应用内的盒子跳转入口很多，不需要在每一处跳转逻辑里单独写替换代码，可以通过全局路由守卫统一做参数转换：
在路由初始化的守卫钩子里，匹配到ItemListByBox路由时，自动把传入的横杠格式参数还原成原始带空格的boxID，再通过路由的props配置直接传递给目标组件，组件内部完全不需要感知格式转换的过程，直接拿到可用的真实boxID即可。

注意事项 #

• 如果业务场景下，原始boxID本身就包含横杠字符，直接做“空格<->横杠”的替换会出现还原歧义，这种场景可以提前维护一份友好标识和真实boxID的映射表：给每个盒子生成一个不含特殊字符的短标识（比如box-1、box-2），路由参数直接传这个短标识，页面加载时通过查表拿到对应的真实boxID，稳定性更高。
• 不需要调整浏览器的URL编码规则，所有编码展示的问题本质上是参数本身包含了需要编码的特殊字符，只要从源头把参数换成URL安全的字符形式，就能自然得到友好的展示效果。

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