17370845950

通过在模板中比对 `request.endpoint` 与路由端点名，可自动为 bootstrap 5 导航项添加 `active` 类，实现点击后持久高亮，无需手动传递变量。

在 Flask 应用中集成 Bootstrap 5 导航栏时，常遇到“点击后 active 类不持久”的问题——这通常是因为依赖前端行为（如 hover）或错误地使用了静态模板变量（如 active_page = "edit_profile.html"），而未真正关联当前请求的路由上下文。

正确做法是利用 Flask 的 request.endpoint 属性：它返回当前请求所匹配视图函数的完整端点名（如 'auth.edit_profile'），该值在每次请求时由 Flask 自动注入，精准反映用户实际访问的页面，无需在每个子模板中手动设置变量。

以下是推荐的实现方式（适配 Bootstrap 5 语义结构）：

✅ 关键要点说明：

• 使用 navbar-nav 和 nav-item / nav-link 是 Bootstrap 5 官方推荐的导航结构，确保样式与 JS 行为（如折叠、下拉）正常；
• request.endpoint 在 Jinja2 模板中直接可用，无需额外导入或配置；
• 端点名必须与 @app.route() 或蓝图注册时的函数名完全一致（含蓝图前缀，如 'auth.edit_profile'）；
• 避免使用 request.path 或 request.url_rule，它们易受 URL 参数、重定向或路径别名影响，可靠性低。

⚠️ 注意事项：

• 若使用蓝图，务必确认端点命名规范（默认为 blueprint_name.view_function_name）；可通过 flask routes 命令查看全部端点列表；
• 不要混用 class="active" 在
• 上（旧版 Bootstrap 习惯），Bootstrap 5 推荐将 active 加在 元素上，否则可能丢失 CSS 样式或 JS 功能；
• 若需支持多级嵌套路由（如 /user/123/profile），仍应基于端点判断，而非解析 URL 字符串——更健壮、更符合 Flask 设计哲学。

此方案简洁、可靠、零侵入，是 Flask + Bootstrap 5 导航高亮的标准实践。