在 Nuxt.js 中，`router.options.routes` 确实不会自动生成嵌套结构的 `children` 属性，即使你的 `pages` 目录结构看起来像是应该有嵌套路由。Nuxt.js 根据 `pages` 目录结构自动生成路由，但它将嵌套路由展平为一维数组，以便简化配置和使用。
### 解决方案
如果你需要在 Nuxt.js 中使用嵌套路由结构（例如，为了面包屑导航或其他需要路由层次信息的场景），你需要手动在 `nuxt.config.js` 中配置路由。这包括显式地定义 `children` 数组。
例如，你可以按照以下方式配置 `nuxt.config.js` 中的路由：
export default {
router: {
extendRoutes(routes, resolve) {
routes.push({
path: '/news',
component: resolve(__dirname, 'pages/news/index.vue'),
name: 'news',
children: [
{
path: ':id',
component: resolve(__dirname, 'pages/news/_id.vue'),
name: 'news-id'
}
]
});
}
}
}
注意，即使你在 `extendRoutes` 中定义了嵌套路由，Nuxt.js 的 `pages` 目录仍然需要保持相应的结构（即 `pages/news/index.vue` 和 `pages/news/_id.vue`），因为 Nuxt.js 会根据这些文件的存在来生成基本的路由信息。
### 面包屑功能
对于面包屑功能，即使 `route.matched` 只返回一个项（在访问 `/news/1` 时是 `news-id`），你仍然可以通过编程方式构建面包屑路径。你可以检查每个路由的 `meta` 属性（如果你在每个路由定义中添加了这些信息），或者通过其他逻辑来推断路径的层次结构。
例如，你可以创建一个帮助函数，该函数接收当前路由并返回一个包含所有父路由和当前路由的数组：
function getBreadcrumbRoutes(route) {
const breadcrumbs = [];
let currentRoute = route;
while (currentRoute.matched.length > 0) {
const record = currentRoute.matched[0];
breadcrumbs.unshift({
name: record.name,
path: record.path
});
currentRoute = record.instances.default.$router.resolve({ name: record.name }).matched[0]?.instances.default.$route || {};
}
// 移除可能的重复根路由
if (breadcrumbs.length > 1 && breadcrumbs[0].path === '/') {
breadcrumbs.shift();
}
return breadcrumbs;
}
这个函数通过遍历 `route.matched` 数组，并使用 `resolve` 方法来获取每个路由的父路由，直到没有更多的父路由为止。然后，你可以使用这个函数来生成你的面包屑导航。
极客观点
项目管理
HarmonyOS
