在Flask结合Bootstrap 5开发Web应用时，导航栏当前项高亮是提升用户操作感知的重要功能，实现该功能需要结合后端路由信息和前端样式控制逻辑，适配Bootstrap 5的导航组件规范。
实现原理概述
动态高亮当前导航栏项的核心逻辑是识别用户当前访问的路由，然后为对应导航项添加Bootstrap 5的高亮样式类active。实现方式主要分为两种：一种是通过Flask后端在渲染模板时传递当前路由信息，直接在模板中判断添加样式；另一种是通过前端JavaScript监听路由变化，动态修改导航项的样式类。
后端模板变量实现方案
Flask后端传递路由信息
在Flask的视图函数中，可以通过request对象获取当前请求的路由路径，将其作为参数传递给前端模板。以下是视图函数的示例代码：
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
# 获取当前请求的路由路径
current_path = request.path
return render_template('index.html', current_path=current_path)
@app.route('/about')
def about():
current_path = request.path
return render_template('index.html', current_path=current_path)
@app.route('/contact')
def contact():
current_path = request.path
return render_template('index.html', current_path=current_path)
if __name__ == '__main__':
app.run(debug=True)
模板中判断添加高亮样式
在Bootstrap 5的导航栏模板中，通过判断导航项的链接地址和传递的current_path是否匹配，为匹配的导航项添加active类，同时设置aria-current属性提升可访问性。以下是模板代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask Bootstrap5 导航栏高亮</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">站点名称</a>
<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 current_path == '/' %}active{% endif %}"
href="/"
{% if current_path == '/' %}aria-current="page"{% endif %}>
首页
</a>
</li>
<li class="nav-item">
<a class="nav-link {% if current_path == '/about' %}active{% endif %}"
href="/about"
{% if current_path == '/about' %}aria-current="page"{% endif %}>
关于我们
</a>
</li>
<li class="nav-item">
<a class="nav-link {% if current_path == '/contact' %}active{% endif %}"
href="/contact"
{% if current_path == '/contact' %}aria-current="page"{% endif %}>
联系我们
</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
前端JavaScript实现方案
如果不想在后端传递路由参数，也可以通过前端JavaScript获取当前页面的路径，然后匹配导航项的链接地址添加高亮样式。以下是实现代码：
// 获取当前页面的路径
const currentPath = window.location.pathname;
// 获取所有导航项链接
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
// 遍历链接匹配路径
navLinks.forEach(link => {
const linkPath = link.getAttribute('href');
// 处理根路径匹配逻辑
if (currentPath === linkPath || (currentPath === '/' && linkPath === '/')) {
link.classList.add('active');
link.setAttribute('aria-current', 'page');
}
});
将上述JavaScript代码放在Bootstrap 5的JS文件引入之后即可生效，该方案适合前后端分离或者不想修改后端代码的场景。
两种方案对比
| 方案类型 | 实现复杂度 | 适配性 | 适用场景 |
|---|---|---|---|
| 后端模板变量方案 | 低，仅需修改模板判断逻辑 | 高，完全匹配后端路由 | 传统Flask服务端渲染项目 |
| 前端JavaScript方案 | 低，仅需少量JS代码 | 中，需处理路由匹配边界情况 | 前后端分离或轻量调整场景 |
注意事项
- Bootstrap 5的
active类需要添加在nav-link元素上，才会生效显示高亮样式。 - 如果导航项有下拉菜单，需要额外判断下拉菜单内的子项路径匹配情况，为对应的子项添加
active类。 - 路由匹配时需要注意带参数的路由场景，比如
/article/1这类动态路由，需要根据实际业务调整匹配逻辑，比如只匹配路由前缀。
FlaskBootstrap_5导航栏高亮动态路由匹配修改时间：2026-06-10 08:24:28