应使用 request.endpoint 判断当前路由并动态添加 active 类，因其是 Flask 内置唯一标识，不受 URL 参数、重定向或前端路由干扰；错误做法包括比对 request.path 或模板文件名。
Flask 模板中用 request.endpoint 判断当前路由
直接在 Bootstrap 导航栏的 <li> 标签上写条件判断，比传参或 JS 匹配路径更可靠。因为 request.endpoint 是 Flask 内置的唯一标识，不会受 URL 参数、重定向或前端路由干扰。
常见错误是拿 request.path 或模板文件名（如 "profile.html"）去比对，但它们不具唯一性——同一视图可能对应多个 URL，而模板名和路由端点根本不是一回事。
-
auth.login和auth.logout是两个不同 endpoint，即使都渲染login.html - 若视图函数用了
@bp.route("/settings", endpoint="user.settings")，就必须用"user.settings"，不能写"settings" - 在 base.html 的导航项里这样写：
{% if request.endpoint == 'auth.profile' %}active{% endif %}
Vue 3 中用 useRoute().matched 或 to.path 做响应式激活
不要监听 click 后手动改 class，也不要靠 window.location.pathname 做字符串匹配——它无法处理带参数的动态路由（如 /user/123/edit），也不响应 Vue Router 的内部跳转。
正确做法是用 useRoute() 获取当前路由对象，再比对 matched 数组或 path 字段：
- 精确匹配：用
route.path === '/dashboard'，适合固定路径 - 模糊匹配（推荐）：遍历
route.matched，检查是否有name: 'user-edit'的路由记录，避免路径拼写误差 - 如果用了命名视图或嵌套路由，
matched比path更稳定
纯前端 JS 用 location.pathname + 正则做路径前缀匹配
没用框架、只靠 Bootstrap + jQuery 或原生 JS 时，location.pathname 是最直接的依据，但硬匹配 ==="/blog" 会漏掉 /blog/2024 这类子路径。
必须用正则或 startsWith 做前缀判断，否则点击子页面后导航栏立刻“掉 active”：
- 错误写法：
if (location.pathname === '/blog') { $el.addClass('active'); } - 正确写法：
if (location.pathname.startsWith('/blog')) { $el.addClass('active'); } - 更健壮可加斜杠边界：
new RegExp('^/blog(/|$)').test(location.pathname) - 注意：单页应用中需监听
popstate，否则浏览器前进/后退时不触发
Bootstrap 5 的 active 类被样式覆盖怎么办
加了 active 但没效果？大概率是 CSS 层叠出了问题，不是逻辑写错了。
先打开开发者工具，检查元素上是否真有 active 类；再看 computed styles 里 background-color、border-bottom 等是否被其他规则清空或重写：
- Bootstrap 5 默认只给
.nav-link.active加了color和background-color，没设border-bottom—— 如果你自定义了底边框，得自己补.nav-link.active { border-bottom: 2px solid #007bff; } - 全局重置样式（如
* { border: 0 }）会干掉所有边框，包括 active 效果 - Vue/React 中若用
:class="{ active: isActive }"却写成class="active"，那它就永远存在，失去动态性
真正难调的不是怎么加 active，而是加了之后为什么看不见——优先查 computed styles，而不是重写 JS 逻辑。
