Vue路由是否需逐个配置子类路径？能否实现自动化配置？

完全不用逐个配置路由，用动态路由就能搞定，既简洁又易维护，具体方案如下：

1. 配置动态路由规则 #

把原来的多个路由合并成一条带动态参数的路由，示例代码：

const routes = [
  {
    path: "../class/:subName",
    name: "subClass",
    component: SubViewVue,
  },
];

这里的:subName是动态参数，会自动匹配URL中../class/后面的部分（比如sub1、sub2、sub3...），所有符合这个格式的URL都会指向SubViewVue组件。

如果需要限制只能匹配指定的子类名称（避免非法路径访问），可以给参数加正则匹配：

const routes = [
  // 假设允许的子类是sub1到sub10，可根据实际需求调整正则规则
  path: "../class/:subName(sub[1-9]|sub10)",
  name: "subClass",
  component: SubViewVue,
];

2. 在组件中获取并使用动态参数 #

在SubViewVue组件里，通过路由参数拿到当前的子类名称，再根据这个值渲染对应内容：

Vue 2写法 #

<template>
  <!-- 根据subName渲染不同内容 -->
  <div v-if="$route.params.subName === 'sub1'">sub1专属内容</div>
  <div v-else-if="$route.params.subName === 'sub2'">sub2专属内容</div>
  <!-- 其他子类逻辑 -->
</template>

Vue 3写法（Composition API） #

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
// 当前子类名称
const subName = route.params.subName;
</script>

<template>
  <div v-if="subName === 'sub1'">sub1专属内容</div>
  <div v-else-if="subName === 'sub2'">sub2专属内容</div>
</template>

3. 生成跳转链接 #

用router-link跳转时，可以通过params传递动态参数：

<router-link :to="{ name: 'subClass', params: { subName: 'sub1' } }">sub1</router-link>
<router-link :to="{ name: 'subClass', params: { subName: 'sub2' } }">sub2</router-link>

也可以直接写路径：

<router-link to="../class/sub1">sub1</router-link>

内容的提问来源于stack exchange，提问作者Abdullah Semih Gür