React Router 6.4.3多产品类型路由复用配置问题咨询

核心思路是通过动态参数匹配任意产品类型和产品标识，彻底避免重复配置路由。以下是主流前端路由框架的具体实现方式：

1. React Router（v6+） #

配置一个通用动态路由，把产品类型和产品别名作为可变参数：

// 路由配置文件
import { Routes, Route } from 'react-router-dom';
import ProductDetail from './pages/ProductDetail';

function AppRoutes() {
  return (
    <Routes>
      // 匹配任意格式：[产品类型]/[产品别名]
      <Route path=":productType/:productSlug" element={<ProductDetail />} />
      // 固定路由（如首页、关于页）要放在动态路由前面，避免被覆盖
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

在产品详情页获取参数并请求数据：

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

function ProductDetail() {
  const { productType, productSlug } = useParams();
  
  // 根据类型和别名拉取对应产品数据
  // 示例：fetch(`/api/products/${productType}/${productSlug}`)
  
  return (
    <div>
      <h2>产品类型：{productType}</h2>
      <p>产品别名：{productSlug}</p>
    </div>
  );
}

2. Vue Router（v3/v4） #

同样配置动态路由规则：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import ProductDetail from '../views/ProductDetail.vue';

const routes = [
  {
    path: '/:productType/:productSlug',
    name: 'ProductDetail',
    component: ProductDetail
  },
  // 固定路由优先配置
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

在组件中获取参数：

<template>
  <div>
    <h2>产品类型：{{ $route.params.productType }}</h2>
    <p>产品别名：{{ $route.params.productSlug }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();

// 后续用 route.params.productType 和 productSlug 请求数据
</script>

关键注意事项 #

• 路由顺序：固定路由必须放在动态路由前面，否则会被动态规则覆盖。
• 参数校验：在详情页可以对productType做合法性校验，比如判断是否属于预设的类型（perfume、base等），非法类型直接跳转到404页面。
• 避免冲突：如果有其他动态路由（如/admin/:id），可以给产品路由加统一前缀，比如/products/:productType/:productSlug，防止规则冲突。

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