nuxt $router跳转传参

在 Nuxt.js 中，我们可以使用 `$router` 对象来进行路由跳转和传递参数。

假设我们要跳转到一个名为 `post` 的路由，并且需要传递一个名为 `id` 的参数，我们可以这样写：

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

其中，`path` 表示路由路径，`query` 是一个对象，表示要传递的参数。在这个例子中，我们传递了一个名为 `id` 的参数，它的值是变量 `postId`。

在目标路由组件中，我们可以通过 `$route.query` 来获取传递的参数：

export default {
  mounted() {
    const id = this.$route.query.id
    // do something with id
  }
}

注意，如果要在 `$route` 中获取动态路由参数，可以使用 `$route.params`。例如，如果我们的路由路径是 `/post/:id`，那么就可以这样获取参数：

const id = this.$route.params.id

相关问题

nuxt-link跳转传参

在 Nuxt 中使用 `nuxt-link` 跳转传参可以通过以下两种方式实现：

1. 使用 `$route` 对象

在组件中使用 `$route` 对象获取当前路由信息，然后通过 `query` 或 `params` 对象来传递参数。

例如：

<template>
  <div>
    <nuxt-link :to="{ name: 'my-page', query: { id: 123, name: 'test' } }">跳转到我的页面</nuxt-link>
  </div>
</template>

在目标页面中可以通过 `$route.query` 获取传递的参数。

例如：

export default {
  mounted() {
    console.log(this.$route.query.id) // 123
    console.log(this.$route.query.name) // test
  }
}

2. 使用动态路由

在路由配置中使用动态路由来传递参数。

例如：

// 路由配置
{
  path: '/my-page/:id',
  name: 'my-page',
  component: MyPage
}

在组件中使用 `params` 对象来传递参数。

例如：

<template>
  <div>
    <nuxt-link :to="{ name: 'my-page', params: { id: 123 } }">跳转到我的页面</nuxt-link>
  </div>
</template>

在目标页面中可以通过 `$route.params` 获取传递的参数。

例如：

export default {
  mounted() {
    console.log(this.$route.params.id) // 123
  }
}

nuxt3 $fetch body传参怎么处理

在 Nuxt.js v3 中，`$fetch` 是由 `@nuxtjs/composition-api-fetch` 插件提供的一个基于 Vue3 Composition API 的异步数据获取方法，它可以用来发送 HTTP 请求。如果你需要将 `body` 参数传递给 `$fetch`，你可以直接作为第三个参数传递，因为它的第一个参数是 URL，第二个参数是配置对象，而第三个参数就是你需要发送的数据体。

以下是一个简单的示例：

import { ref, computed } from 'vue'
import { useFetch } from '@nuxtjs/composition-api-fetch'

export default {
  setup() {
    const apiUrl = ref('https://api.example.com/data') // API 地址
    const requestBody = ref({ key: 'value' }) // 请求体

    // 使用 $fetch，其中第三个参数是 body
    const fetchData = async () => {
      const response = await useFetch(apiUrl.value, {}, requestBody.value)
      // ... 处理返回结果
      return response
    }

    // 将 fetchData 作为一个计算属性返回，这样可以在模板中方便地调用
    const data = computed(async () => {
      try {
        return await fetchData()
      } catch (error) {
        console.error('Error fetching data:', error)
        return null
      }
    })

    return { data }
  },
}

在模板（如 `.vue` 文件）中，你可以像这样调用它：

<template>
  <button @click="getData">Fetch Data</button>
  <div v-if="data">{{ data }}</div> <!-- 省略错误处理 -->
</template>

<script>
// ...
</script>