如何在Nuxt中配置动态路由，实现localhost:3000/info/${id}访问

下面分两种常见场景给出具体实现步骤：

场景1：使用Next.js（默认端口3000，匹配你的环境） #

步骤1：创建动态路由页面 #

在项目的pages目录下新建info文件夹，然后在该文件夹内创建[id].js文件（文件名的方括号是Next.js动态路由的标识）。

方案A：客户端渲染（适合无需SEO的场景） #

import { useEffect, useState } from 'react';

export default function InfoPage({ params }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchInfo = async () => {
      try {
        // 调用已有的API路由
        const res = await fetch(`/api/info/${params.id}`);
        if (!res.ok) throw new Error('数据请求失败');
        const result = await res.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchInfo();
  }, [params.id]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  // 根据你的API返回结构渲染内容，示例如下
  return (
    <div className="info-container">
      <h1>ID: {data.id} 的详情</h1>
      <p>名称: {data.name}</p>
      <p>描述: {data.description}</p>
      {/* 其他字段按需添加 */}
    </div>
  );
}

// Next.js 13+ App Router 需要导出该函数，若用Pages Router可省略
export async function generateStaticParams() {
  // 若需预渲染部分页面，可在这里返回所有可能的id数组，否则留空即可
  return [];
}

方案B：服务器端渲染（适合需要SEO的场景） #

export default function InfoPage({ data, error }) {
  if (error) return <div>加载错误：{error}</div>;

  return (
    <div className="info-container">
      <h1>ID: {data.id} 的详情</h1>
      <p>名称: {data.name}</p>
      <p>描述: {data.description}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  const { id } = context.params;
  try {
    const res = await fetch(`http://localhost:3000/api/info/${id}`);
    if (!res.ok) throw new Error('API请求失败');
    const data = await res.json();
    return { props: { data } };
  } catch (err) {
    return { props: { error: err.message } };
  }
}

场景2：使用React Router（create-react-app等项目） #

步骤1：安装依赖 #

npm install react-router-dom

步骤2：配置路由 #

在项目的根路由文件（比如App.js）中添加动态路由规则：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import InfoPage from './pages/InfoPage';

function App() {
  return (
    <Router>
      <Routes>
        {/* 配置动态路由，`:id`是参数占位符 */}
        <Route path="/info/:id" element={<InfoPage />} />
        {/* 其他路由规则 */}
      </Routes>
    </Router>
  );
}

export default App;

步骤3：创建InfoPage组件并获取数据 #

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

export default function InfoPage() {
  // 获取URL中的id参数
  const { id } = useParams();
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchInfo = async () => {
      try {
        const res = await fetch(`/api/info/${id}`);
        if (!res.ok) throw new Error('数据请求失败');
        const result = await res.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchInfo();
  }, [id]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  return (
    <div className="info-container">
      <h1>ID: {data.id} 的详情</h1>
      <p>名称: {data.name}</p>
      <p>描述: {data.description}</p>
    </div>
  );
}

核心逻辑总结 #

1. 创建对应动态路由的页面组件，通过框架提供的语法（Next.js的[id].js、React Router的:id）定义参数占位符
2. 获取URL中的id参数
3. 调用你的/api/info/${id}接口获取对应数据
4. 根据接口返回的数据结构渲染页面内容

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