如何为Vue Router指定路由修改URL链接分隔符为分号？

Vue Router本身没有提供直接修改路径分隔符的配置项，但可以通过以下几种方式实现需求：

方法一：使用路由别名（Alias）匹配多路径配置 #

给目标路由添加一个带分号的别名，同时保留原路径，这样既支持标准斜杠路径，也能匹配分号开头的路径：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import DiagnosticsReport from '../components/DiagnosticsReport.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/diagnostics-report',
    name: 'diagnostics-report',
    component: DiagnosticsReport,
    // 添加带分号的别名路径
    alias: '/;diagnostics-report'
  },
  // ... 其他路由
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;

之后生成链接时，直接指定别名路径即可：

<!-- 在组件中使用 -->
<router-link to="/;diagnostics-report">查看诊断报告</router-link>

方法二：导航守卫拦截并修改URL #

如果需要强制URL仅显示分号格式（而非同时支持两种路径），可以通过全局导航守卫实现跳转时的URL替换：

1. 配置基础路由 #

先给目标路由设置标准路径：

const routes = [
  // ... 其他路由
  {
    path: '/diagnostics-report',
    name: 'diagnostics-report',
    component: DiagnosticsReport,
  },
];

2. 添加全局导航守卫 #

router.beforeEach((to, from, next) => {
  // 跳转到诊断报告路由时，替换URL为分号格式
  if (to.name === 'diagnostics-report') {
    const targetUrl = `${import.meta.env.BASE_URL};diagnostics-report`;
    if (!window.location.href.endsWith(targetUrl)) {
      window.location.replace(window.location.origin + targetUrl);
      return;
    }
  }
  next();
});

// 处理用户直接访问分号格式URL的情况
router.beforeEach((to, from, next) => {
  if (window.location.pathname === ';diagnostics-report') {
    next({ name: 'diagnostics-report' });
    return;
  }
  next();
});

注意事项 #

• 浏览器对URL格式有标准规范，直接以分号开头的路径（如xxx.com;diagnostics-report）可能存在兼容性问题，部分浏览器会将其解析为异常路径，建议优先使用xxx.com/;diagnostics-report格式。
• 若需生成分号格式的链接，避免使用路由名称跳转（to="{name: 'diagnostics-report'}"），直接指定分号路径即可。

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