如何在开发环境中使用Nuxt SPA动态路由进行测试开发？

无需依赖nuxt generate，Nuxt的开发服务器本身就完全支持动态路由，直接按以下步骤操作即可：

• 创建动态路由页面
  在pages目录下创建带下划线命名的文件，比如要实现表格的动态详情路由，创建pages/table/_id.vue。这里的_id就是动态参数，访问/table/1001、/table/1002这类路径时，Nuxt会自动匹配该页面。

• 获取动态参数并渲染表格
  在页面组件中，根据你使用的API风格获取参数：

  • 选项式API：通过this.$route.params.id拿到当前路由的ID参数，再请求对应数据渲染表格：

    export default {
      async asyncData({ params }) {
        // 这里用params.id请求数据，比如从接口获取表格数据
        const tableData = await fetch(`/api/table/${params.id}`).then(res => res.json())
        return { tableData }
      }
    }
    

  • Composition API（Nuxt 3或Nuxt 2 + @nuxtjs/composition-api）：用useRoute()钩子获取参数：

    import { useRoute } from 'vue-router'
    import { useAsyncData } from '#app'
    
    export default {
      setup() {
        const route = useRoute()
        const { data: tableData } = useAsyncData('tableData', () => 
          fetch(`/api/table/${route.params.id}`).then(res => res.json())
        )
        return { tableData }
      }
    }
    

• 启动开发服务器测试
  运行npm run dev（或yarn dev）启动开发环境，直接在浏览器访问http://localhost:3000/table/你的测试ID，就能看到对应动态路由的表格页面。你也可以在其他页面添加跳转链接：

  <nuxt-link :to="`/table/${item.id}`">查看表格详情</nuxt-link>
  

• 补充说明
  nuxt generate仅用于生产环境生成静态预渲染文件，开发环境完全不需要依赖它。SPA模式下，Nuxt的客户端路由会自动处理动态路径，开发服务器会直接响应所有匹配的动态路由请求。

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