Nuxt - 实现动态路由传递多个参数，路径 URL 上增加多个以 “/“ 斜线分割的参数（不使用 _id.vue 创建文件这种方式）详细示例教程，新手小白直接上手！

前言

网上的教程全都是创建文件的方式 _参数名.vue，这种无法实现多个参数（并且用 / 分割各个参数）。

本文实现了 在 Nuxt.js 项目中，实现了地址栏动态路由，使用 " / " 拼接多个参数，以及如何获取这些参数，

你可以参照本文提供的示例，按照教程简单几步就能将该效果 “完美复刻” 到您的项目中。

如下图所示，无限定义多个参数，并且就算不传递也不会报错，

页面中，可以在路由中轻松拿到这些参数。

在这里插入图片描述

我这里创建了一个 “干净” 的新项目，没有任何其他业务逻辑，这样方便您阅读。

咱们就拿 pages/index.vue 首页来举例，它目前的目录结构是这样的，如下图所示：