Vue vue-router如何导航访问带文件扩展名的文件URL路径

• 业务需求：通过带后缀的URL访问多种格式文件，包括.txt、.json、.pdf、.xlsx等类型

• 访问场景说明（地址栏直接输入URL）：

  • mysite.com/documents/file.txt：预期可正常访问，当前返回404
  • mysite.com/documents/file：当前可正常访问，但不符合业务需求

• 预期效果：将路径中的file.txt作为路由参数传入，实现对应文件的下载功能

• 已尝试的无效路由配置：
  第一种配置：

  {
    path: "documents/:name",
    name: "documents-file",
    component: () => import("@/pages/MainPages/DocumentPage.vue")
  },  
  

  携带文件扩展名访问返回404。

  第二种配置：

  {
    path: "documents/:name.:extension",  // 该写法同样无效
    name: "documents-file",
    component: () => import("@/pages/MainPages/DocumentPage.vue")
  },  
  

  携带文件扩展名访问同样返回404。

• 部署限制：应用部署在DigitalOcean无服务器应用平台，无法修改服务器端配置
• 当前依赖版本：
  • Vue: ^3.2.31
  • vue-router: ^4.0.13

出现该问题有两个核心原因：

1. vue-router 4.0.x版本默认动态参数:的匹配规则遇到.会终止匹配，导致带后缀的路径无法命中对应路由
2. DigitalOcean无服务器静态托管默认将带文件后缀的路径判定为静态资源请求，找不到对应文件时直接返回404，不会回退到index.html交给前端路由处理

按以下两步配置即可解决：

1. 修正路由匹配规则 #

根据需求二选一即可：

• 方案A：将文件名+后缀整体作为单个路由参数（兼容当前4.0.13版本，无需升级依赖）

{
  // 自定义参数匹配规则，匹配/documents/后的所有字符，包括带.的后缀
  path: "documents/:filename(.*)",
  name: "documents-file",
  component: () => import("@/pages/MainPages/DocumentPage.vue")
}

配置后在组件中通过route.params.filename即可拿到完整的文件名（如file.txt），可自行拆分文件名和后缀。

• 方案B：拆分文件名、后缀为两个独立参数（需升级vue-router到4.1.0及以上版本）

{
  path: "documents/:name.:ext",
  name: "documents-file",
  component: () => import("@/pages/MainPages/DocumentPage.vue")
}

配置后route.params.name对应纯文件名（如file），route.params.ext对应后缀名（如txt）。

2. 配置DigitalOcean平台SPA回退规则 #

无需修改平台后台配置，直接在项目根目录（和package.json同级）新建static.json文件，写入以下配置：

{
  "static_sites": [
    {
      "error_document": "index.html",
      "routes": {
        "/documents/*": "index.html"
      }
    }
  ]
}

该配置会让所有/documents/开头的请求（无论是否带文件后缀）都返回index.html，交由前端vue-router处理，不会触发平台层面的404。配置完成后重新部署应用即可生效。

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