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

前言：最近在搞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
复制代码

4. js里面接收参数

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


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