computed 属性可响应式过滤路由配置实现权限控制，需结合 Vue Router API 动态添加/更新路由，并配合路由守卫二次校验，确保权限逻辑前后端一致且高效。
Vue.js 的 computed 属性本身不直接参与路由注册或过滤，但它能高效响应式地生成**动态路由配置数组**，配合 Vue Router 的 addRoute 或 router.addRoute（v4）/ router.addRoutes（v3），实现权限驱动的路由动态加载与隐藏。核心在于：权限数据变化 → computed 重新求值 → 触发路由更新逻辑。
用 computed 筛选可访问的路由配置
将原始完整路由表（含 meta.permission 字段）与用户权限列表（如 ['user:read', 'post:edit']）结合，通过 computed 实时过滤出当前用户有权访问的路由项：
- 原始路由定义保持静态、集中管理，例如在
router/index.js中导出allRoutes - 在 setup() 或 data 中声明用户权限（如从 pinia/store 或登录后接口获取）
- 用 computed 返回过滤后的路由数组，每个路由需保留 name、path、component、meta 等必要字段
const userPermissions = ref(['user:read', 'role:assign'])
const filteredRoutes = computed(() => {
return allRoutes.filter(route => {
const required = route.meta?.permission
if (!required) return true // 无需权限的路由默认放行
return Array.isArray(required)
? required.some(p => userPermissions.value.includes(p))
: userPermissions.value.includes(required)
})
})
配合 Vue Router 动态添加/刷新路由
computed 本身不会自动注册路由，需监听其变化并调用路由 API：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- Vue Router v4：使用
router.addRoute()逐条添加，或先router.getRoutes().forEach(r => router.removeRoute(r.name))清空再批量 add - Vue Router v3：调用
router.addRoutes(filteredRoutes)（注意该方法仅在初始未启动前有效，生产中建议用router.matcher.addRoutes()替代） - 推荐在权限变更后（如登录、切换角色）显式触发一次路由同步，避免过度响应
配合路由守卫做二次校验
computed 过滤仅控制菜单/导航显示，不能替代服务端鉴权。必须配合 router.beforeEach 做运行时校验：
立即学习“前端免费学习笔记（深入）”；
- 检查 to.meta.permission 是否满足当前权限，不满足则重定向到 403 或首页
- 避免用户手动修改 URL 绕过前端隐藏逻辑
- 可复用与 computed 相同的权限判断逻辑，保证前后一致
注意响应式边界与性能
computed 依赖的数据必须是响应式的，且避免在计算中执行副作用（如发请求、改 DOM）：
- 权限数据应来自 ref / reactive / store，不要用普通对象
- 若权限来自异步接口，computed 应基于已 resolve 的响应式状态（如
permissions.value），而非直接 await - 路由数量大时，可对 filteredRoutes 做 shallowRef + markRaw 优化，避免 Vue 深度代理组件选项
