
通过在模板中比对 `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 导航高亮的标准实践。










