VueJS3路由出现多余斜杠，如何清理URL？

问题场景 #

代码运行正常，但浏览器地址栏显示http://localhost:5173/%2FLink，希望去除多余斜杠，获得干净的URL。

模板代码：

<template>
    <div class="mystyle">
        <router-link :to="{ name: 'page1', params: { sub: post_data.link }}"><div class="linkstyle">{{ post_data.link }}</div></router-link>
        </router-link> <!-- 冗余标签 -->
    </div>
</template>

路由配置（route/index.js）：

routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/:sub',
      name: 'page1',
      component: PageView
    },
]

曾尝试移除路由path属性中的斜杠，但Vue Router不支持，已恢复配置。

解决方案 #

1. 修复模板冗余标签

模板中多了一个无效的</router-link>闭合标签，先删除它，避免潜在渲染问题。

2. 处理参数的前置斜杠

问题核心是post_data.link的值开头带有斜杠（比如/Link），当作为路由参数:sub传递时，斜杠会被URL编码为%2F，最终导致地址栏出现/%2FLink的怪异路径。

你可以用两种方式处理：

• 模板内直接处理：用正则移除参数开头的所有斜杠

  <router-link :to="{ name: 'page1', params: { sub: post_data.link.replace(/^\/+/, '') }}">
    <div class="linkstyle">{{ post_data.link }}</div>
  </router-link>
  

• 脚本中预处理（更易维护）：
  在组件的计算属性中提前处理参数：

  export default {
    // ...其他配置
    computed: {
      cleanLink() {
        // 移除字符串开头的所有斜杠
        return this.post_data.link.replace(/^\/+/, '');
      }
    }
  }
  

  再在模板中使用处理后的值：

  <router-link :to="{ name: 'page1', params: { sub: cleanLink }}">
    <div class="linkstyle">{{ post_data.link }}</div>
  </router-link>
  

3. 保留现有路由配置

你的路由path: '/:sub'符合Vue Router规范，路由路径必须以斜杠开头，无需修改这部分。

处理后，地址栏会显示干净的http://localhost:5173/Link。

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