vue3 递归处理嵌套路由

Vue 3 中实现递归处理嵌套路由
在 Vue 3 中，为了实现递归处理嵌套路由，可以通过定义具有相同名称的组件来渲染不同层次的内容。这种方式特别适用于构建树形结构的数据展示，比如文件夹浏览、分类导航等场景。
定义路由配置
首先，在 routes.js 文件中定义好静态和动态路径匹配规则：
const routes = [
{
path: '/category/:id*',
name: 'Category',
component: () => import('@/views/Category.vue'),
children: [
{
path: ':childId?',
component: () => import('@/components/SubCategory.vue')
}
]
}
];
登录后复制
这里的关键点在于使用了通配符参数 :id* 和可选参数 :childId? 来支持任意层数的子节点访问[^1]。
创建 Category 组件
接下来创建一个名为 Category.vue 的视图组件用于加载顶层数据并判断是否有更深一层的数据需要继续展开：
<template>
<div class="category">
<!-- 显示当前类目信息 -->
{{ categoryInfo }}

<!-- 如果存在更深层次，则再次调用自己 -->
<router-view v-if="hasChildren"></router-view>

<!-- 或者根据实际情况调整为其他逻辑 -->
</div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';

// 假设有一个获取类别详情的方法 getCategoryId()
let route = useRoute();
let categoryId = computed(() => route.params.id);
let hasChildren = /* ... */ ; // 计算属性决定是否还有更多层级
let categoryInfo = /* ... */ ; // 当前类目的具体信息
</script>
登录后复制
此模板中的 <router-view> 将会自动寻找与之对应的子级路由，并重复执行相同的流程直到遍历结束整个树状结构[^2]。
SubCategory 组件 (可选)
如果希望进一步区分父级和子级的表现形式，也可以单独编写 SubCategory.vue 组件作为子项容器；不过对于简单的应用场景来说直接让 Category.vue 自身完成递归可能是更为简洁的选择[^4]。