Nuxt 动态路由传参

今天说一下在 nuxt 框架中的三种传参方式

写在前面，先看一下页面所在文件夹位置

在 pages 下有个 basicinfo 文件夹，此文件夹下面有两个文件，index.vue 和 _id.vue

1、使用 router-link

1.1、使用 params 传参

<router-link :to="{name: 'basicinfo', params: {name: 'qwe', age: 23}}">测试</router-link>

会跳转到 basicinfo 下的 index.vue 文件

如何在跳转到的页面取值

<router-link :to="{name: 'basicinfo-id', params: {id: 123, name: 'qwe', age: 23}}">测试</router-link>

（注意：basicinfo-id 中后面的 id，需要和 _id.vue 的文件名保持一致。如果 _id.vue 改为 _abc.vue，相应的 basicinfo-id 需要改为 basicinfo-abc）

会跳转到 basicinfo 下的 _id.vue 文件

取值（注意：因为创建文件时写的是 _id.vue，所以取值时要用 params.id 或 query.id，如果创建文件时取名为 _abc.vue，取值时用 params.abc 或 query.abc 即可，其他方式同理）

1.2、使用 query 传参

<router-link :to="{name: 'basicinfo', query: {name: 'qwe', age: 23}}">测试</router-link>

会跳转到 basicinfo 下的 index.vue 文件（这里的路径可以写 name 也可以写 path，用 path 时需要加上'/'，例如：path: '/basicinfo'）

取值

<router-link :to="{path: '/basicinfo/123', query: {name: 'qwe', age: 23}}">测试</router-link>

会跳转到 basicinfo 下的 _id.vue 文件

取值

 2、使用 this.$router.push

2.1、使用 params 传参

this.$router.push({name: 'basicinfo', params: {name: 'qwe', age: 23}})

跳转到 index.vue，取值

this.$router.push({name: 'basicinfo-id', params: {id: 123, name: 'qwe', age: 23}})

跳转到 _id.vue，取值

2.2、使用 query 传参

this.$router.push({path: '/basicinfo', query: {name: 'qwe', age: 23}})

跳转到 index.vue，取值（这里的路径可以写 name 也可以写 path）

this.$router.push({path: '/basicinfo/123', query: {name: 'qwe', age: 23}})

跳转到 _id.vue，取值

 3、使用 a 标签 href 属性

<a :href="'/basicinfo?name=qwe&age=23'">测试</a>

跳转到 index.vue，取值

<a :href="'/basicinfo/123?name=qwe&age=23'">测试</a>

跳转到 _id.vue，取值