vue-router如何为所有路由链接末尾统一添加斜杠/？

哈哈，这个需求我之前做项目的时候也遇到过！Vue Router官方文档里确实没有直接的配置项，但咱们可以通过两种简单的方式实现所有路由URL末尾强制带斜杠的效果，亲测有效～

方法一：全局前置守卫（最省心的方案） #

用全局导航守卫在每次路由跳转前自动检查并补全斜杠，还能避免无限循环和静态资源误处理：

// 在你的router实例初始化后添加
router.beforeEach((to, from, next) => {
  // 两个判断条件：1. 路径末尾没有斜杠；2. 不是静态资源（比如.js/.png这类文件）
  if (!to.path.endsWith('/') && !to.path.match(/\.\w+$/)) {
    // 重定向到带斜杠的路径，同时保留原查询参数
    next({ path: to.path + '/', query: to.query })
  } else {
    // 正常跳转
    next()
  }
})

这个方法的好处是一劳永逸，不管你后续新增多少路由，都不用额外配置，自动帮你统一格式。

方法二：路由配置+重定向（适合路由较少的场景） #

如果你的项目路由不多，也可以手动给每个路由配置带斜杠的路径，同时添加不带斜杠的重定向规则：

const routes = [
  // 先配置不带斜杠的重定向
  { path: '/home', redirect: '/home/' },
  // 再配置实际带斜杠的路由
  { path: '/home/', component: Home },
  
  { path: '/about', redirect: '/about/' },
  { path: '/about/', component: About },
  
  // 其他路由以此类推
]

这种方式更直观，但路由多的话会有点繁琐，适合小型项目。

额外注意：History模式下的服务器配置 #

如果你的项目用了history模式，别忘了在服务器端也做相应配置（比如Nginx/Apache），确保用户直接访问不带斜杠的URL时，服务器能正确重定向到带斜杠的版本，避免404错误。比如Nginx可以这样配置：

location / {
  try_files $uri $uri/ /index.html;
}

这样不管是路由层面还是服务器层面，都能保证URL格式统一啦～

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