nuxt params传参

在 Nuxt.js 中，我们可以通过路由参数（params）来传递参数。这些参数可以通过 `$route.params` 或 `context.params` 来获取。

以下是一个示例，演示如何在 Nuxt.js 中使用路由参数：

1. 定义带有动态路由参数的页面路由：

// 在 pages 目录下的 _id.vue 文件中定义路由
<template>
  <div>
    <h1>用户 ID: {{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

2. 在页面中访问路由参数：

export default {
  created() {
    console.log(this.$route.params.id) // 访问路由参数
  }
}

3. 从上下文中获取路由参数：

export default {
  asyncData({ params }) {
    console.log(params.id) // 从上下文中获取路由参数
  }
}

注意：使用路由参数传递的参数是动态的，因此需要注意在页面切换时，路由参数是否发生了变化。

相关问题

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 中常用的路由传参和接收的方式。具体使用时可以根据实际情况选择。

nuxt-page 传参

`nuxt-page` 是 Nuxt.js 框架中用于定义单页应用（SPA）路由的一部分，它允许你在每个页面组件中传递参数。当你在 Nuxt 的 `pages` 目录下创建一个文件，并在其中声明一个 Vue 组件，你可以通过动态路由的方式给这个组件传参。

例如，假设你有一个名为 `about.vue` 的页面，你可以在其组件模板上使用 `<nuxt-link>` 标签并传递参数：

<template>
  <div>
    <h1>About {{ params.name }}</h1>
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true,
    },
  },
}
</script>

然后，在你的 Nuxt.config.js 或者 .vue 文件中配置动态路由：

// Nuxt.config.js
export default {
  router: {
    mode: 'history',
    routes: [
      { path: '/about/:name', component: () => import('./pages/about.vue') },
    ],
  },
}

现在访问 `/about/john Doe` 就会渲染 `about.vue` 页面，并将 `name` 参数设置为 "john Doe"。