如何配置带动态参数的路由？以/Detail/{id}跳转至Detail组件为例

下面针对目前主流的前端路由框架，分别给出具体的实现方案：

React Router（v6+版本） #

1. 路由定义 #

在路由配置中，通过:id声明动态参数，示例如下：

import { Routes, Route } from 'react-router-dom';
import Detail from './pages/Detail';

function App() {
  return (
    <Routes>
      {/* 用:id匹配URL中的动态参数 */}
      <Route path="/Detail/:id" element={<Detail />} />
    </Routes>
  );
}

如果使用createBrowserRouter写法：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Detail from './pages/Detail';

const router = createBrowserRouter([
  {
    path: '/Detail/:id',
    element: <Detail />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

2. 组件中获取动态参数 #

在Detail组件内，通过useParams钩子获取id参数：

import { useParams } from 'react-router-dom';

function Detail() {
  const { id } = useParams();
  return <div>当前详情ID：{id}</div>;
}

3. 导航到动态路由 #

使用Link组件生成跳转链接：

import { Link } from 'react-router-dom';

// 假设id为具体数值（如123）
<Link to={`/Detail/${123}`}>查看详情</Link>

也可以用编程式导航：

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
// 触发跳转
navigate(`/Detail/${123}`);

Vue Router（v4+版本，适配Vue 3） #

1. 路由定义 #

在路由配置文件中，通过:id声明动态参数：

import { createRouter, createWebHistory } from 'vue-router';
import Detail from './views/Detail.vue';

const routes = [
  {
    path: '/Detail/:id', // 用:id标识动态参数
    name: 'Detail',
    component: Detail,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

2. 组件中获取动态参数 #

在Detail组件内，可直接通过$route.params获取，或用useRoute钩子：

<template>
  <div>当前详情ID：{{ $route.params.id }}</div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
// JS方式获取参数
console.log(route.params.id);
</script>

3. 导航到动态路由 #

使用<router-link>组件生成跳转链接：

<!-- 字符串拼接写法 -->
<router-link :to="`/Detail/${123}`">查看详情</router-link>
<!-- 命名路由写法（更推荐，参数匹配更可靠） -->
<router-link :to="{ name: 'Detail', params: { id: 123 } }">查看详情</router-link>

编程式导航写法：

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
// 触发跳转
router.push(`/Detail/${123}`);
// 命名路由方式
router.push({ name: 'Detail', params: { id: 123 } });
</script>

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