nuxt 路由传参和接收的方式

在 Nuxt 中，可以通过以下方式进行路由传参和接收：

1. 通过动态路由传递参数

动态路由是指路由中包含参数的路由，例如 `pages/users/_id.vue` 路由可以接受 `/users/1`、`/users/2` 等不同的请求方式。在组件内部，可以通过 `$route.params` 获取传递过来的参数。

<template>
  <div>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

2. 通过查询参数传递参数

查询参数是指路由后面通过 `?` 分隔的参数，例如 `/users?id=1&name=Tom`。在组件内部，可以通过 `$route.query` 获取传递过来的参数。

<template>
  <div>
    <p>User ID: {{ $route.query.id }}</p>
    <p>User Name: {{ $route.query.name }}</p>
  </div>
</template>

3. 通过 Vuex 存储全局数据

如果需要在多个组件之间共享数据，可以使用 Vuex 进行全局状态管理。在组件内部，可通过 `this.$store.state.xxx` 获取存储在 Vuex 中的数据。同时，也可以通过 `this.$store.commit('mutationName', payload)` 提交一个 mutation 来修改 Vuex 中的数据。

以上三种方式都是 Nuxt 中常用的路由传参和接收的方式。具体使用时可以根据实际情况选择。