unplugin-vue-router-动态路由 (Dynamic Routes)

unplugin-vue-router 提供了一种通过特殊的文件/文件夹命名约定来创建包含动态参数的路由的方式。你不需要手动编写路由配置，只需要按照约定命名文件，插件就会自动生成对应的 Vue Router 动态路由规则。

我们来分解一下不同类型的动态路由约定：

1. 基础动态路由参数 (Required Parameter)

• 目的： 创建一个 URL 路径中包含必须存在的可变部分的路由。例如，你需要一个 /users/123 或 /users/abc 这样的路径，其中 123 或 abc 是用户的 ID。
• 文件命名约定： 使用单层方括号 [] 包裹参数名。
  • 示例 1 (文件夹): src/pages/users/[id].vue
    • 这会生成 Vue Router 路径: /users/:id
    • 这里的 :id 是 Vue Router 表示动态参数的标准语法。它会匹配 /users/ 后面的任何非空段（直到下一个 / 或路径结束）。
  • 示例 2 (文件名的一部分): src/pages/users_[id].vue
    • 这会生成 Vue Router 路径: /users_:id
    • 这表示参数可以嵌入到路径段的中间，它会匹配像 /users_123 这样的 URL。
  • 示例 3 (多个参数): src/pages/product_[skuId]_[seoDescription].vue
    • 这会生成 Vue Router 路径: /product_:skuId_:seoDescription (推断)
    • 这表示你可以在一个文件名中定义多个参数。

2. 可选参数 (Optional Parameter)

• 目的： 创建一个 URL 路径中包含可有可无的可变部分的路由。例如，你希望 /users 和 /users/456 都能匹配同一个路由。
• 文件命名约定： 使用双层方括号 [[]] 包裹参数名。
  • 示例: src/pages/users/[[id]].vue
    • 这会生成 Vue Router 路径: /users/:id?
    • 这里的 :id? 是 Vue Router 表示可选参数的标准语法。末尾的 ? 表示 :id 这部分可以存在也可以不存在。

3. 可重复参数 (Repeatable Parameter / Slugs)

• 目的： 创建一个可以匹配一个或多个路径段的参数。例如，你希望 /articles/tech/vue/routing 这个 URL 中的 tech/vue/routing 都被捕获为一个名为 slugs 的参数（通常是一个数组）。
• 文件命名约定： 在单层方括号 [] 之后添加一个加号 +。
  • 示例: src/pages/articles/[slugs]+.vue
    • 这会生成 Vue Router 路径: /articles/:slugs+
    • 这里的 :slugs+ 是 Vue Router 表示可重复参数的标准语法。+ 表示它必须匹配至少一个路径段，并且会捕获所有后续的段直到路径结束。

4. 可选的可重复参数 (Optional Repeatable Parameter)

• 目的： 创建一个可以匹配零个或多个路径段的参数。这是可选参数和可重复参数的结合。例如，/articles 和 /articles/news/updates 都能匹配，并且如果存在 news/updates，它们会被捕获。
• 文件命名约定： 使用双层方括号 [[]] 包裹参数名，并在之后添加一个加号 +。
  • 示例: src/pages/articles/[[slugs]]+.vue
    • 这会生成 Vue Router 路径: /articles/:slugs*
    • 这里的 :slugs* 是 Vue Router 表示可选可重复参数的标准语法。* (星号) 表示它可以匹配零个或多个路径段。

总结：

unplugin-vue-router 通过这些简洁的文件命名约定，让你无需手动编写复杂的 Vue Router 配置，就能轻松创建各种类型的动态路由：

文件名约定	生成的 Vue Router 路径	含义	示例文件	匹配示例 URL
[param]	:param	必需参数	users/[id].vue	/users/123
[[param]]	:param?	可选参数	users/[[id]].vue	/users, /users/123
[param]+	:param+	可重复参数（至少一个）	articles/[slugs]+.vue	/articles/a/b, /articles/a
[[param]]+	:param*	可选可重复参数（零个或多个）	articles/[[slugs]]+.vue	/articles, /articles/a/b

在对应的 Vue 组件内部，你可以通过 Vue Router 提供的 useRoute().params 来访问这些捕获到的参数值。例如，对于 users/[id].vue，可以在组件的 setup 函数中这样获取 id：

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = route.params.id; // 获取 URL 中的 id 参数值

// 对于可重复参数 (如 :slugs+ 或 :slugs*)，route.params.slugs 会是一个包含路径段的数组
// const slugsArray = route.params.slugs;
</script>