Flask+JS实现管理后台无刷新更新内容与URL，刷新后保持页面状态

1. 调整Flask后端路由逻辑 #

你当前的问题核心是刷新时访问/dashboard/welcome路由，服务端直接返回了独立的welcome.html内容，而非仪表盘主页面。我们需要让所有/dashboard开头的普通访问都返回主页面，仅对AJAX请求返回子页面内容：

from flask import request

# 匹配/dashboard和所有/dashboard/开头的路径
@app.route('/dashboard')
@app.route('/dashboard/<path:subpath>')
def dashboard_server(subpath=None):
    # 白名单校验，避免路径遍历漏洞，新增导航页只需在此添加对应名称
    valid_subpages = {'welcome'}
    # 判断是否为AJAX请求（jQuery的load方法默认会带X-Requested-With请求头）
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        if subpath in valid_subpages:
            return render_template(f'{subpath}.html')
        # 非法路径返回片段级404
        return "<p>页面不存在</p>", 404
    # 普通请求（刷新、直接输入地址访问）统一返回仪表盘主页面
    return render_template("dashboard_server.html")

修改后可以删除原来单独的welcome路由配置。

2. 补充前端初始化加载逻辑 #

页面加载时需要自动读取当前URL路径，加载对应子页面内容到#main-view容器，同时可以把导航点击逻辑统一化，不需要每个按钮单独写事件：

HTML代码调整 #

给所有导航链接加上统一的类名，方便绑定事件：

<a href="/dashboard/welcome" class="nav-link" id="welcome-button">Welcome</a>
<!-- 后续其他导航项也用相同的class即可 -->

JS代码调整 #

$(function() {
    // 页面初始化时自动加载对应子页面
    const currentPath = window.location.pathname
    if (currentPath.startsWith('/dashboard/')) {
        $('#main-view').load(currentPath, function() {
            console.log("初始内容加载完成")
        })
    }

    // 统一绑定所有导航链接的点击事件
    $('.nav-link').click(function(event) {
        event.preventDefault()
        const href = $(this).attr('href')
        $('#main-view').load(href, function() {
            console.log("内容加载完成")
        })
        history.pushState(null, "", href)
    })
})

效果验证 #

• 点击导航按钮时，AJAX请求返回子页面内容加载到主视图，URL同步更新，和原有效果一致
• 刷新页面时，服务端返回仪表盘主页面，前端自动根据当前URL加载对应子页面内容，不会跳转到独立的子页面
• 后续新增导航项只需在后端valid_subpages白名单中添加对应页面名称，新增对应HTML模板，导航链接填写对应路径即可，无需修改其他逻辑

内容的提问来源于stack exchange，提问作者MaxCodes