一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

Nuxt3-学习之路 05， 路由-动态路由

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的 乱七八糟 的 知识点。

路由

上一节，我们讲了 路由需要在根目录下的 pages 文件夹下创建，以及静态路由的一个使用。下面学习下动态路由。

动态路由

动态路由与静态路由类似，也是通过文件夹名 和 文件名 来进行匹配，但是不同的点是，动态路由需要 [] 方括号来进行包裹，例如下面的：

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

文件夹名为 user-[group] ，那么我们的路由可以为：

• /user-1/[id]
• /user-2/[id]
• /user-xxx/[id]

文件名为 [id].vue，那么我们的路由可以为：

• /user-1/1，/user-1/2，/user-1/xxx
• /user-2/1，/user-2/2，/user-2/xxx
• /user-xxx/1，/user-xxx/2，/user-xxx/xxx

通过上面的例子，我们可以知道，既然 [group] 和 [id] 均为动态路由的参数，那么我们就可以在 [id].vue 这个页面中，通过 route 的 params 来进行获取里面的参数值，即为

route.params.group route.params.id

下面我们创建对应的文件夹 和 进行访问

此时页面有两种访问方式：

• 直接在 template 中进行访问

  如果在这里面访问 group 及 id 的话，那么不需要任何引入，直接使用 $route 即可

• 在 script 里面进行访问

  在这里访问，需要我们使用 useRoute() 跟我们使用 useMeta() 一样，内部已经封装好，我们直接引入调用即可。

上面的链接是我们手输的，那么通过页面跳转是否可以呢？

我们在 pages/index.vue 这个页面下增添

点击后，发现依然是可以成功跳转。

总结

学习了下 动态路由 的一个使用方式 和 参数的一个获取