如何配置vue-router让/apps路径请求全部透传？

场景：根目录部署父应用A，子应用B、C分别部署在/apps/B和/apps/C路径下。访问/apps/B能正常加载B，但访问/apps/B/xyz这类深层路径时，会被重定向到父应用A。

问题根源 #

父应用A的Vue Router默认会尝试匹配所有路径，当访问/apps/B/xyz时，A的路由系统找不到对应规则，就会触发默认重定向（比如跳转到根路由），导致子应用的深层路径无法被正确处理。

正确的Vue Router配置 #

修改父应用的路由全局守卫，拦截所有/apps/开头的路径，直接透传给子应用，同时阻止父应用路由继续处理：

router.beforeEach((to, from, next) => {
  // 精准匹配所有以/apps/开头的路径（包含查询参数）
  if (to.path.startsWith('/apps/')) {
    // 跳转到完整路径，确保查询参数也能透传
    window.location.href = to.fullPath;
    // 阻止父应用路由继续执行，避免冲突
    return next(false);
  }
  next();
});

配置说明 #

• 使用startsWith('/apps/')替代includes('/apps/')，避免误匹配类似/xxx/apps/yyy这类非目标路径
• 必须调用next(false)终止父应用的路由流程，否则window.location.href跳转后，父应用路由仍会继续处理，可能导致异常
• to.fullPath包含完整的路径和查询参数，确保子应用能接收到所有请求信息

配合服务器配置（以Nginx为例） #

仅靠前端配置还不够，需要服务器确保子应用的深层路径能正确指向子应用的index.html：

# 配置子应用B的路由
location /apps/B/ {
  try_files $uri $uri/ /apps/B/index.html;
}

# 配置子应用C的路由
location /apps/C/ {
  try_files $uri $uri/ /apps/C/index.html;
}

# 父应用A的路由
location / {
  try_files $uri $uri/ /index.html;
}

这样配置后，访问/apps/B/xyz或/apps/C/abc?foo=bar这类路径时，会先被父应用的路由守卫拦截，直接跳转到对应路径，再由服务器转发到子应用，子应用的路由就能正常处理深层路径了。

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