用Map存储路径拦截规则推荐键为路径字符串、值为配置对象，支持动态增删和精确匹配，但动态路由需配合路径解析，函数或正则作键可实现模糊匹配。
在前端路由导航守卫中，用 Map 存储路径拦截规则是一种清晰、高效的方式，尤其适合需要动态增删规则或按路径精确匹配的场景（比如权限控制、灰度跳转、登录态校验等）。它比对象或数组更易维护键值语义，也支持任意类型键（如正则、函数），但实际使用中需注意匹配逻辑和守卫执行时机。
用 Map 存储结构化拦截规则
不建议直接把路径字符串当键存，而应设计带行为语义的规则项。例如：
✅ 推荐结构（键为路径字符串，值为拦截配置）：
const guardRules = new Map([
['/admin', { requiresAuth: true, roles: ['admin'] }],
['/user/profile', { requiresAuth: true, roles: ['user', 'admin'] }],
['/preview/:id', { requiresAuth: false, isPreview: true }]
]);
⚠️ 注意：动态路由参数（如 /preview/:id）需配合路径解析逻辑，Map 本身不支持通配符匹配。
立即学习“Java免费学习笔记（深入）”；
在 Vue Router 导航守卫中使用 Map 匹配
在 router.beforeEach 中，先对当前 to.path 做标准化（如去除查询参数、处理别名），再查 Map：
- 用
guardRules.has(to.path)做精确匹配（适合静态路径） - 对含参数的路径，可遍历
guardRules.keys()，用path-to-regexp或简易正则判断是否匹配 - 若匹配到规则，执行对应逻辑（如跳转登录页、检查用户角色、记录埋点）
示例（简化版）：
router.beforeEach((to, from, next) => {
const rule = guardRules.get(to.path);
if (rule?.requiresAuth && !isAuthenticated()) {
next('/login?redirect=' + encodeURIComponent(to.fullPath));
return;
}
if (rule?.roles && !hasRole(...rule.roles)) {
next('/403');
return;
}
next();
});
支持动态注册与运行时更新
Map 的优势在于可随时增删规则，无需重载路由配置：
- 权限变更后调用
guardRules.set('/report', { requiresAuth: true, roles: ['finance'] }) - 灰度发布时用
guardRules.delete('/new-feature')临时下线校验 - 搭配事件总线或 Pinia，在模块加载后自动注入专属规则
⚠️ 注意：修改 Map 不会触发守卫重跑，只影响后续导航；已有守卫执行不受影响。
进阶：用函数或正则作 Map 键实现灵活匹配
若需模糊/模式匹配，可将匹配函数设为键（需确保引用一致）：
const dynamicRule = (path) => /^\/order\/\d+$/.test(path);
guardRules.set(dynamicRule, { requiresAuth: true });
// 守卫中遍历执行：
for (const [matcher, config] of guardRules) {
if (typeof matcher === 'function' && matcher(to.path)) {
// 执行 config 对应逻辑
break;
}
}
更稳妥的做法是统一用字符串键 + 外部匹配器（如 path-to-regexp 编译后的正则），避免键引用丢失问题。
