如何在Flask中为所有路由（含错误页）实现加载页面？

你的问题核心在于：Flask 的 return 语句会直接终止函数执行，所以你写在 return render_template('loading.html') 之后的代码永远不会运行，自然无法渲染主页面。加载页面的逻辑应该放在前端层面实现，而非后端路由中，以下是具体解决方案：

核心思路 #

通过模板继承，把加载动画统一注入到所有页面（包括错误页）的基础模板中，利用 JavaScript 监听页面/数据加载状态，控制加载层的显示与隐藏。

步骤1：创建基础模板（统一注入加载层） #

创建 templates/base.html，将加载动画和控制逻辑放在这里，所有页面都继承该模板：

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
    <style>
        /* 加载层样式（可替换为你loading.html中的动画样式） */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 全局加载层 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner"></div>
    </div>

    <!-- 页面内容占位 -->
    {% block content %}{% endblock %}

    <script>
        // 页面所有资源加载完成后隐藏加载层
        window.addEventListener('load', () => {
            document.getElementById('loadingOverlay').style.display = 'none';
        });
    </script>
</body>
</html>

步骤2：编写业务页面模板 #

所有页面（包括404错误页）继承基础模板，只需专注于自身内容：

首页模板 templates/index.html #

{% extends "base.html" %}

{% block title %}首页{% endblock %}

{% block content %}
    <h1>这是首页内容</h1>
    <!-- 你的页面内容 -->
{% endblock %}

404错误页模板 templates/404.html #

{% extends "base.html" %}

{% block title %}页面未找到{% endblock %}

{% block content %}
    <h1>404 - 页面不存在</h1>
    <p>你访问的页面无法找到</p>
{% endblock %}

步骤3：修改Flask路由 #

路由直接返回对应业务模板即可，无需再单独处理加载页：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 执行后端逻辑（如数据库查询）
    return render_template('index.html')

@app.errorhandler(404)
def not_found_error(error):
    return render_template('404.html'), 404

if __name__ == '__main__':
    app.run(debug=True)

进阶：异步数据加载场景 #

如果页面内容依赖后端API异步获取，可在业务页面中手动控制加载层的显示时机：

{% extends "base.html" %}

{% block content %}
    <div id="dataContent"></div>
    <script>
        // 手动显示加载层
        document.getElementById('loadingOverlay').style.display = 'flex';
        
        // 异步请求数据
        fetch('/api/get-data')
            .then(res => res.json())
            .then(data => {
                // 渲染数据内容
                document.getElementById('dataContent').innerHTML = `<h2>${data.title}</h2>`;
                // 隐藏加载层
                document.getElementById('loadingOverlay').style.display = 'none';
            })
            .catch(err => {
                console.error('加载失败:', err);
                document.getElementById('dataContent').innerHTML = '<p>数据加载失败</p>';
                document.getElementById('loadingOverlay').style.display = 'none';
            });
    </script>
{% endblock %}

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