如何在Nuxt中创建可获取URL中ID参数的动态路由？

要实现你需要的功能，核心就是用Nuxt的动态路由机制，步骤非常直接：

1. 创建动态路由页面 #

在pages目录下按以下结构创建文件：

• 新建id文件夹
• 在id文件夹内创建_id.vue文件（文件名开头的下划线是关键标识，Nuxt会自动把它识别为动态参数的占位符）

这样配置后，Nuxt会自动生成匹配/id/xxx格式的路由规则，其中xxx就是你要提取的动态ID。

2. 在组件中获取URL里的ID参数 #

选项式API（适用于Nuxt2或兼容写法） #

在_id.vue组件里，直接通过this.$route.params.id就能拿到URL中的ID：

<template>
  <div>当前项目ID：{{ projectId }}</div>
</template>

<script>
export default {
  data() {
    return {
      projectId: ''
    }
  },
  mounted() {
    // 提取URL中的ID
    this.projectId = this.$route.params.id
    // 用ID发起API请求
    this.fetchProjectData()
  },
  methods: {
    async fetchProjectData() {
      const res = await fetch(`/api/projects/${this.projectId}`)
      const data = await res.json()
      // 处理接口返回的数据
      console.log(data)
    }
  }
}
</script>

组合式API（Nuxt3推荐写法） #

如果用Nuxt3的组合式API，先引入useRoute工具函数即可：

<template>
  <div>当前项目ID：{{ projectId }}</div>
</template>

<script setup>
const route = useRoute()
const projectId = route.params.id

// 发起API请求
const fetchProjectData = async () => {
  const res = await fetch(`/api/projects/${projectId}`)
  const data = await res.json()
  console.log(data)
}

fetchProjectData()
</script>

额外说明（针对Nuxt2） #

Nuxt2里还可以用asyncData钩子，在页面渲染前就完成数据请求：

export default {
  async asyncData({ params }) {
    const res = await fetch(`/api/projects/${params.id}`)
    const data = await res.json()
    return { project: data }
  }
}

这种方式能让页面渲染时直接拿到接口数据，无需等待组件挂载。

内容的提问来源于stack exchange，提问作者Cranwell