Nuxt.js 动态路由和获取参数我按照官方文档中的基础路由创建了如图所示的目录和文件。其中 _edit 目录表示作

要实现如下的链接跳转并获取其中的参数 40

http://192.168.0.102:3000/article/40/edit

这表示跳转到 id 为 40 的文章编辑页面

我按照官方文档中的基础路由创建了如图所示的目录和文件。其中 _edit 目录表示作为变量（也就是动态）的路径参数，不管输入什么字符都可以到达其目录下的 edit.vue 页面。也就是文章开头的那个网址。

创建完目录后可以去自动生成的路由里看一下。点开 .nuxt 目录找到 router.js 文件

可以看到原来我们创建的以下划线为前缀的目录 _edit，被翻译成了这个样子。同样的，如果是 .vue 文件的名字前缀是下划线，那么你输入任何字符都会打开这个 .vue 文件。不过也可以在 加了下划线前缀的页面 加入下面的代码，这样就可以规定你想要的字符类型了。

export default {
  validate ({ params }) {
    // 必须是number类型
    return /^\d+$/.test(params.id)
  }
}

接下来要用这个参数向后端要数据，先在当前页拿到路由参数。

let id = this.$route.params.id;

回看一下文章开头的截图，article 目录下和 _edit 目录同级有个 _id.vue 文件，和前面说的意思一样，这里不管用什么替代 40，都会跳转到 _id.vue 页面。当然这里的命名也是自定义的，只要以下划线开头就行了。

http://192.168.0.102:3000/article/40

获取到文章 id 后，点击编辑跳转到编辑页面并携带文章 id。

<nuxt-link :to="'/article/' + id +'/edit'">编辑</nuxt-link>

如果要传的参数不止一个，可以用下面这种方式

<nuxt-link :to="{path: '/article/' + id + '/edit'}, params: { userId: 123 }}">编辑</nuxt-link>

获取 params 中变量的方式变成了这样

let id = this.$route.query.userId;

在编辑页面得到 _edit 表示的值。

this.articleId = this.$route.params.edit;