nuxt 路由跳转和传参方式

1. 使用 nuxt-link 传参

nuxt-link 用于页面间的跳转，并且支持传递参数。可以通过两种方式传参：

a. 使用 params 传参

params 是通过动态路由来传递的参数，通常用于 URL 的路径中。

<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>
  <li>
    <nuxt-link :to="{ path: '/news', query: { newsId: 3306 } }">query传参</nuxt-link>
  </li>
</ul>

b. params vs query

• params: 用于动态路由的参数，通常与路由的 name 配合使用。params 是嵌入在 URL 路径中的，如 /news/:newsId。
• query: 用于查询参数，通常附加在 URL 的 ? 后面，如 /news?newsId=3306。

2. 使用 JavaScript 路由跳转传参

在 JavaScript 中，你可以通过 $router.push 来跳转页面并传递参数。可以选择使用 path、params 或 query 来传参。

a. 字符串方式传参

this.$router.push('/project?id=123')  // 传递查询参数

b. params 方式传参

this.$router.push({ name: 'project', params: { id: 123 } })

• 这里的 name 指的是 Nuxt 自动生成的路由名称，不是文件路径的名称。

c. query 方式传参

this.$router.push({ path: '/project', query: { id: 123 } })

3. 路由配置和自动生成的路由名称

假设 pages 目录结构如下：

pages/
  └── user/
      ├── index.vue
      └── one.vue
  └── index.vue

Nuxt 自动生成的路由配置如下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

• name: 是根据 pages 目录自动生成的，不是你手动指定的。
• params 传参时，需要使用路由的 name 而不是路径。

4. 接收参数

接收到的参数可以通过 $route.params 和 $route.query 来访问。

a. 在模板中接收参数

<p>Path参数：{{$route.params.id}}</p>
<p>Query参数：{{$route.query.id}}</p>

b. 在组件生命周期中接收参数

1. 在 mounted 中接收

   mounted() {
     console.log(this.$route.params.id)
     console.log(this.$route.query.id)
   }
   

2. 在 asyncData 中接收
   asyncData 是 Nuxt 提供的一个特殊钩子，用来在页面渲染前获取数据。

   asyncData({ params, query }) {
     console.log('id', params.id)
     console.log('id', query.id)
   }
   

5. 动态路由传参

动态路由的参数通常是通过文件名加上 :（如 _id.vue）来定义的。

a. 动态路由配置

假设你的目录结构是这样的：

pages/
  └── test/
      └── _id.vue
      └── list.vue

Nuxt 会自动生成以下路由：

{
  name: 'test-id',
  path: '/test/:id',
  component: 'pages/test/_id.vue'
}

b. 使用 nuxt-link 传递动态路由参数

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

这里通过 params 传递了 id 参数，确保动态路由使用的是正确的路由名称。

6. 路由嵌套

如果你的页面有嵌套的子路由，Nuxt 提供了嵌套视图的功能。你需要创建一个目录和相应的 Vue 文件来定义子视图。

a. 嵌套路由的目录结构

pages/
  └── test2/
      └── list/
          └── index.vue  // 默认视图
          └── _id.vue    // 子组件视图
      └── list.vue       // 父视图

b. 使用 nuxt-link 传递参数并显示子组件

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

<nuxt-child />  <!-- 用于显示嵌套的子组件视图 -->

• 通过 nuxt-child 组件来渲染子路由对应的视图。

总结

• nuxt-link 用于在模板中跳转并传递路由参数，可以通过 params 或 query 传递参数。
• $router.push 提供了在 JavaScript 代码中跳转并传递参数的方式，可以使用字符串、params 或 query。
• 动态路由 通过文件名的方式（例如 _id.vue）来实现，路由参数会被传递到相应的组件中。
• 嵌套路由 通过在目录结构中定义子组件，使用 <nuxt-child /> 来显示嵌套的视图。