计算属性不参与动态路由注册，仅用于前端过滤展示菜单；真正路由添加需调用router.addroute()，在登录后守卫中执行。
计算属性本身不直接参与动态路由注册，但它非常适合在权限系统中做「路由菜单的前端过滤展示」——也就是把已注册的路由，按当前用户权限筛出来、生成侧边栏或顶部导航菜单。真正的路由添加（addRoute）必须由 Vue Router 实例完成，且需在登录后、守卫中执行，不能靠 computed 触发。
计算属性用于菜单渲染（非路由注册）
假设你已通过后端接口获取了用户角色（如 ['admin', 'editor']），并存入 Vuex/Pinia 或组件响应式数据（如 userRoles），同时本地定义了完整路由表 allRoutes（含 meta.roles 字段），那么可用计算属性安全、高效地过滤出可显示的菜单项：
- 只读、响应式：当 userRoles 变化时，菜单自动更新，无需手动触发
- 不修改原始路由对象：避免污染路由配置，符合不可变原则
- 支持嵌套展开：递归处理 children，适配多级菜单结构
示例代码（Vue 3 + Composition API）：
// 在 setup 或 script setup 中const userRoles = ref(['editor'])
const allRoutes = [ /* 本地定义的完整路由数组，含 meta.roles */ ]
const filteredMenu = computed(() => {
const filter = (routes) => {
return routes.filter(route => {
// 允许无 roles 的路由（如首页、个人中心）
const allowed = !route.meta?.roles || route.meta.roles.some(r => userRoles.value.includes(r))
if (allowed && route.children?.length) {
route = { ...route, children: filter(route.children) }
}
return allowed ? route : null
})
}
return filter(allRoutes)
})
真正注册动态路由必须用 addRoute 或 addRoutes
计算属性无法调用 router.addRoute() —— 这是副作用操作，必须在登录成功后的业务逻辑中显式执行。典型流程如下：
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用户登录 → 获取 token + 用户信息（含角色/菜单数据）
- 调用 filterAsyncRoutes(menuFromBackend, localRoutes) 得到合法路由数组
- 遍历结果，对每个路由调用 router.addRoute(route)
- 跳转到首页（如 /dashboard），避免白屏或 404
注意：addRoute 是增量注册，不会覆盖已有路由；但首次登录前仅挂载 constantRoutes（登录页、404 等）。
后端配合的关键点（非可选）
纯前端角色判断（如 meta.roles）只适用于权限简单、角色固定的内部系统。真实项目中，后端必须提供以下支持：
-
统一菜单接口：如
GET /api/user/menu，返回扁平或树形结构，字段至少包含 path、title、icon、order、hidden、keepAlive、component（或 componentKey 供前端映射） - 路由与菜单分离：菜单数据 ≠ 完整路由定义。后端只管「该用户能看到什么入口」，前端负责将 path 映射到对应组件（建议用 componentKey + 动态 import）
-
支持按钮级权限标识：除菜单外，额外返回
permissions: ['user:create', 'order:delete']，供页面内 v-permission 指令或组件逻辑使用 - 权限变更实时通知机制（进阶）：如 WebSocket 推送权限更新，前端清空路由缓存并重新 fetch + resetRouter
为什么不能只靠计算属性实现完整动态路由？
因为 Vue Router 的路由匹配发生在导航阶段，依赖内部 matcher 树。计算属性返回的只是普通 JS 对象数组，不参与实际路由解析。若未调用 addRoute，即使菜单里显示了「系统设置」，点击 /system 仍会 404。计算属性解决的是「展示什么」，addRoute 解决的是「能否访问」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
