请说明在项目中如何利用 Vue Router 的路由配置自动生成导航菜单，包括路由结构的组织方式、菜单项的生成逻辑、以及如何处理嵌套路由和动态路由等特殊情况。

回答思路

1. 【回答框架 1】首先说明路由配置文件的结构，通常是一个数组，每个路由对象包含路径、组件、子路由和元信息等字段，可以约定在 meta 中放置菜单标题、图标、排序、是否隐藏等字段。导航菜单生成的基础是遍历这个路由数组。
2. 【回答框架 2】然后解释生成逻辑：定义一个函数，递归遍历路由配置，对于每个路由对象，检查是否满足显示条件（如不在 meta.hidden 中），提取所需信息构建菜单项。若存在子路由，则递归生成子菜单，并注意父子层级关系。
3. 【回答框架 3】接着说明如何适配动态路由：动态添加的路由（如权限路由）可以通过 router.addRoutes 添加后，再次调用生成函数更新菜单，或者利用 Vuex 存储菜单数据，在路由变化时重新计算。
4. 【回答框架 4】最后补充特殊情况处理：如详情页这类非菜单路由，可通过 meta.hidden 或约定隐藏；懒加载组件时需异步处理，避免菜单闪烁；同时考虑到权限控制，菜单生成应与路由守卫结合，确保用户只能看到有权限的菜单项。
5. 【关键点 1】路由配置中约定 meta 字段携带菜单信息，如 title、icon、hidden。
6. 【关键点 2】使用递归遍历路由配置，生成树形菜单结构。
7. 【关键点 3】动态路由通过 addRoutes 添加后再触发菜单更新机制。
8. 【关键点 4】菜单与权限结合，通过路由守卫过滤无权限的菜单项。
9. 【易错点 1】只处理两级路由，忽略多级嵌套，导致菜单层级错误。
10. 【易错点 2】动态添加路由后未更新菜单数据，导致菜单不完整。
11. 【易错点 3】未处理 meta.hidden 或存在类似详情页的无需显示的路由，导致多出无意义菜单项。