前言：最近在搞nuxt项目，因为平时做路由跳转的时候，传参都是用的query的方式，前几天因为不想影响页面地址的url，试了下params的方式，写了多次都出错，今天查看了文档，发现用params的方式传参时：name指的是nuxt生成路由配置后的name，不是指页面的路径，也不是组件内部定义的name属性。

基础路由传参

1. nuxt-link 方式传参

<ul>
  <li>
    <nuxt-link to="/">首页</nuxt-link>
  </li>
  <li>
    <nuxt-link :to="{name: 'about'}">关于</nuxt-link>
  </li>
  <li>
    <nuxt-link :to="{name: 'news', params: { newsId: 3306 }}">params传参</nuxt-link>
  <li>
    <nuxt-link :to="{path: '/news', query: { newsId: 3306 }}">query传参</nuxt-link>
  </li>
</ul>
复制代码

2. js的方式传参

// 字符串的方式
this.$router.push('/project?id=123')
// params方式,注意：name是指nuxt生成后的name
this.$router.push({ name: 'project', params: { id: 123} }) 
// query方式
this.$router.push({ path:'/project', query: { id: 123 } })
复制代码

说明

用字符串的方式传参时：参数是页面的路径拼接上?以及后面的参数。
用params的方式传参时：name指的是nuxt生成路由配置后的name，不是指页面的路径。
比如：pages目录下有：/project/index，/project/create，nuxt默认生成的name就为 project、project-create，而不是组件内部写的name属性。
用query的方式传参时：path指的是页面的路径。

假设 pages 的目录结构如下：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
复制代码

那么，Nuxt.js 自动生成的路由配置如下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',   // params传参时，用到的 name
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',  // params传参时，用到的 name
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}
复制代码

3. 接收参数

// 模板里面接收
$route.params.id
$route.query.id
复制代码

// 方式一：mounted里面接收
mounted(){
  this.$route.params.id
  this.$route.query.id
}


// 方式二：asyncData里面接收
asyncData({params,query}){
  console.log('id',params.id)
  console.log('id',query.id)
}
复制代码

动态路由传参

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。主要注意name的值，文件路径名-动态路由名称（这个名称不带_）。

假设页面路径是这样的：

pages/
--| test/
-----| _id.vue // 动态路由的参数 id,文件名则需用 _id
-----| list.vue
复制代码

最后生成的路由配置就是这样的：

{
  name: 'test-id',
  path: '/test/:id',
  component: 'pages/test/_id.vue'
},
{
  name: 'test-list',
  path:'/test/list',
  components: '/pages/teset/list.vue'
}
复制代码

1.nuxt-link方式传参

<ul>
  <li v-for="item of arr">
    <nuxt-link
      :to="{ name: 'test-id', params: { id: item.id } }"
    >
      {{ item.title }}
    </nuxt-link>
  </li>
</ul>
复制代码

动态路由传参，当然这里只支持name，params的方式啦。

2.js的方式传参

参照上面的基础路由传参方式就行。

3.接收参数

参照上面的基础路由接收参数方式就行。

注意：参数名对应动态路由的文件名。比如你定义动态路由的文件是 _id.vue，那么动态路由的params的参数就是id，那么params: {id: 1}。

路由嵌套

创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。如我的目录如下：

pages/
--| test2/
-----| list/  目录名，必须与下面的list.vue文件同名
--------| index.vue  这是list.vue组件默认的视图内容
--------| _id.vue    这是子组件视图内容
-----| list.vue
复制代码

模板中用法如下，注意name的值：

<ul>
  <li v-for="item of arr">
    <nuxt-link
      :to="{ name: 'test2-list-id', params: { id: item.id } }"
    >
      {{ item.title }}
    </nuxt-link>
  </li>
</ul>
<nuxt-child></nuxt-child>
复制代码

注意：最后一定要加上<nuxt-child></nuxt-child>组件，这是子组件的视图。

结束：这就是常用到的关于nuxt路由传参的几种方式了。

nuxt路由跳转传参的几种方式