Vue Router 4中如何获取当前路由的子路由？

问题原因 #

useRoute()返回的route对象的children属性并非指向你在路由配置中定义的子路由——这个属性是Vue Router内部用于嵌套路由渲染上下文的，而非暴露配置中的子路由列表。

解决方案 #

要获取路由配置中定义的子路由，需要使用route.matched数组。这个数组包含了当前URL匹配到的所有路由记录，每条记录都保留了配置中的children属性。

实现代码 #

以下是通用导航组件的完整实现，支持响应式更新：

<template>
  <nav class="sub-nav">
    <router-link
      v-for="childRoute in childRoutes"
      :key="childRoute.name"
      :to="{ name: childRoute.name }"
      active-class="active"
    >
      {{ childRoute.meta.title }}
    </router-link>
  </nav>
</template>

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

const route = useRoute();

// 响应式获取当前路由的子路由列表
const childRoutes = computed(() => {
  // 获取当前匹配的最后一条路由记录
  const currentRouteRecord = route.matched.at(-1);
  // 处理无子女路由的情况，返回空数组
  return currentRouteRecord.children || [];
});
</script>

关键说明 #

1. route.matched数组：包含了从根路由到当前路由的所有匹配记录，例如访问/users/images时，数组会包含users和userImages两条记录。
2. 响应式计算：使用computed包裹可以确保路由切换时，导航链接自动更新。
3. 路由链接渲染：通过router-link的name属性跳转，比使用path更健壮，避免路由路径变更导致的链接失效。

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