unplugin-vue-router-路由组 (Route Groups)

118 阅读2分钟

简单来说,路由组 是一种在文件结构层面组织你的页面(路由)文件的方法,这种组织方式不会影响最终用户访问的 URL 地址

想象一下,你的网站项目里有很多页面文件都放在 src/pages/ 目录下。随着项目变大,这个目录可能会变得很乱。你可能想把功能上相关的页面放在一起,比如所有“管理员”相关的页面放一个文件夹,所有“普通用户”相关的页面放另一个文件夹。

通常情况下,如果你在 pages 目录下创建一个普通的文件夹,比如 admin,然后把 dashboard.vue 放进去 (src/pages/admin/dashboard.vue),那么访问这个页面的 URL 就会变成 /admin/dashboard。文件夹名 admin 成为了 URL 路径的一部分。

但是,有时候你只想整理文件,并不想改变 URL 结构。 你希望:

  • 文件路径是:src/pages/admin/dashboard.vue (方便开发者查找和维护)
  • 访问 URL 仍然是:/dashboard (保持 URL 简洁或符合之前的设计)

路由组 (Route Groups) 就是用来解决这个问题的!

实现方式:

你只需要在创建用于组织文件的文件夹时,给文件夹名加上括号 ()

看例子:

  • 你创建了 (admin) 文件夹,里面放了 dashboard.vuesettings.vue
  • 你创建了 (user) 文件夹,里面放了 profile.vueorder.vue

结果:

  • 文件 src/pages/(admin)/dashboard.vue 对应的 URL 是 /dashboard (注意:URL 里没有 admin!)
  • 文件 src/pages/(admin)/settings.vue 对应的 URL 是 /settings
  • 文件 src/pages/(user)/profile.vue 对应的 URL 是 /profile (注意:URL 里没有 user!)
  • 文件 src/pages/(user)/order.vue 对应的 URL 是 /order

核心思想:

unplugin-vue-router看到文件夹名被括号 () 包裹起来时,就知道:“哦,这个文件夹 (admin)(user) 只是用来组织文件结构的,它的名字不应该成为最终 URL 的一部分。”

好处:

  1. 逻辑分组: 可以按功能、用户角色或其他逻辑,把相关的页面文件归类到不同的文件夹中。
  2. 提高可维护性: 文件结构更清晰,更容易找到和管理相关的页面代码。
  3. 保持 URL 简洁: 不会因为整理文件而引入不必要的 URL 层级。
  4. 共享布局(常见用途): 路由组常常用来为一组页面应用相同的布局(Layout)。比如,所有在 (admin) 文件夹下的页面可能都需要一个特定的“管理员后台”布局,路由组使得在结构上应用这种布局变得更方便。

总之,路由组是一种让你在不改变最终 URL 的前提下,优化 pages 目录文件组织结构的技巧。它通过在文件夹名上加括号 () 来告诉路由系统忽略这个文件夹名作为 URL 路径的一部分。