Vue 3中Child组件如何获取自身匹配的路由名称（非子路由）

当访问嵌套路由的子层级时，useRoute() 返回的是当前激活的最底层路由记录（即示例中的 Grandchild），但你可以通过路由的 matched 数组获取所有匹配的路由层级，从中筛选出 Child 对应的路由信息。

具体实现方法 #

在 Child.vue 组件中，通过 useRoute() 获取路由实例后，从 matched 数组里查找名称为 Child 的路由记录：

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
// 查找当前组件对应的路由记录
const childRouteRecord = route.matched.find(record => record.name === 'Child')

// 此时 childRouteRecord.name 就是 'Child'
console.log(childRouteRecord.name)
</script>

原理说明 #

route.matched 是一个按匹配顺序排列的数组，包含从根路由到当前激活路由的所有匹配路由记录：

• 索引 0：Parent 路由记录
• 索引 1：Child 路由记录
• 索引 2：Grandchild 路由记录

你也可以通过索引直接获取（比如 route.matched[1]），但通过路由名称 name 查找更健壮，能避免后续路由结构调整导致索引失效的问题。

内容的提问来源于stack exchange，提问作者Thanh Tu Nguyen