简单来说,路由组 是一种在文件结构层面组织你的页面(路由)文件的方法,这种组织方式不会影响最终用户访问的 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.vue和settings.vue。 - 你创建了
(user)文件夹,里面放了profile.vue和order.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 的一部分。”
好处:
- 逻辑分组: 可以按功能、用户角色或其他逻辑,把相关的页面文件归类到不同的文件夹中。
- 提高可维护性: 文件结构更清晰,更容易找到和管理相关的页面代码。
- 保持 URL 简洁: 不会因为整理文件而引入不必要的 URL 层级。
- 共享布局(常见用途): 路由组常常用来为一组页面应用相同的布局(Layout)。比如,所有在
(admin)文件夹下的页面可能都需要一个特定的“管理员后台”布局,路由组使得在结构上应用这种布局变得更方便。
总之,路由组是一种让你在不改变最终 URL 的前提下,优化 pages 目录文件组织结构的技巧。它通过在文件夹名上加括号 () 来告诉路由系统忽略这个文件夹名作为 URL 路径的一部分。