本文详解如何利用 flask 的 `request.endpoint` 在 bootstrap 5 导航栏中自动为当前访问页面添加 `active` 类，实现精准、可靠、无需手动传参的导航状态管理。

在 Flask 应用中集成 Bootstrap 5 导航栏时，一个常见痛点是：手动通过模板变量（如 active_page）控制 active 类容易出错、维护成本高，且无法真正“保持激活”——点击后页面跳转，但状态未同步更新。根本原因在于：你设置的 active_page = "edit_profile.html" 是字符串字面量，而路由匹配应基于视图函数的 endpoint（端点名），而非模板文件名。

正确的做法是在 base.html 的导航栏中直接读取当前请求的 request.endpoint —— 这是 Flask 内置对象，代表当前被调用的视图函数标识符（如 'auth.edit_profile'），稳定、唯一、无需额外传参。

以下是推荐的 Bootstrap 5 兼容实现（注意类名结构需符合 Bootstrap 5 的 .navbar-nav > .nav-item > .nav-link 规范）：

度加AI

度加AI官网入口，百度官方 AIGC 创作平台，支持 AI 成片、AI 生文、数字人、声音克隆、配音字幕与智能剪辑等在线创作能力。

下载

<nav class="navbar navbar-expand-md navbar-dark bg-dark"><div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
<li class="nav-item">
          <a class="nav-link{% if request.endpoint == 'auth.edit_profile' %} active{% endif %}" href="%7B%7B%20url_for('auth.edit_profile')%20%7D%7D">
            编辑资料
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link{% if request.endpoint == 'main.index' %} active{% endif %}" href="%7B%7B%20url_for('main.index')%20%7D%7D">
            首页
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link{% if request.endpoint == 'auth.logout' %} active{% endif %}" href="%7B%7B%20url_for('auth.logout')%20%7D%7D">
            退出登录
          </a>
        </li>
      </ul>
</div>
  </div>
</nav>

✅ 关键要点说明：

• 使用 request.endpoint 替代自定义变量，避免模板间耦合与拼写错误；
• url_for('auth.edit_profile') 中的 'auth.edit_profile' 必须与路由装饰器中 @auth.route(...) 对应的 endpoint 一致（默认即为 blueprint_name.view_function_name）；
• Bootstrap 5 要求 active 类加在 标签（.nav-link）上，而非
• （.nav-item），否则样式不生效；
• 确保已正确加载 Bootstrap 5 CSS 和 JS（含 data-bs-toggle 所需的 Popper/Bootstrap JS）；
• 若使用自定义 endpoint（如 @route(..., endpoint='profile_edit')），则需匹配该自定义名。

? 进阶建议：
可封装为 Jinja 宏提升复用性：

{%- macro nav_link(endpoint, text, **kwargs) -%}
  <a class="nav-link{% if request.endpoint == endpoint %} active{% endif %}" href="%7B%7B%20url_for(endpoint)%20%7D%7D" kwargs>
    {{ text }}
  </a>
{%- endmacro -%}

<!-- 使用 -->

{{ nav_link('auth.edit_profile', '编辑资料') }}

这样，无论用户从何处进入页面，导航栏都能自动、准确地高亮当前激活项，彻底解决“点击后不保持激活”的问题。