Flask路由异常：点击按钮跳转后仅渲染初始页面的原因

1. 浏览器锚点（Hash）不发送给服务器：URL中#后面的部分属于浏览器端的锚点标识，修改它只会在当前页面内触发锚点定位，不会向服务器发起新的HTTP请求。因此点击按钮后，浏览器不会调用你写的/#ordergrade/路由，服务器依然返回初始的interface.html页面。
2. Flask路由配置错误：Flask的路由路径不能包含#，#不属于URL的路径部分，服务器无法识别带#的路由规则，你的@app.route('/#ordergrade/')从一开始就不会被触发。

方案1：使用普通路径路由（多页跳转） #

修改后端路由，去掉#，设置正常的路径：

@app.route('/')
def main():
    return render_template('interface.html')

@app.route('/ordergrade/')
def ordergrade():
    return sort.orderbygrade(True, False).to_html()

# 其他功能对应的路由同理添加，比如/orderuniversity/、/showopts/等

修改前端按钮的跳转逻辑，直接跳转到对应路径：

<button onclick="window.location.href='/ordergrade/'">1</button>
<button onclick="window.location.href='/orderuniversity/'">2</button>
<button onclick="window.location.href='/showopts/'">3</button>
<button onclick="window.location.href='/delete/'">4</button>
<button onclick="window.location.href='/infnum/'">5</button>
<button onclick="window.location.href='/supnum/'">6</button>

方案2：AJAX加载内容（单页应用风格） #

如果不想跳转页面，而是在当前页面加载内容，可以用AJAX实现：

后端修改 #

添加API风格的路由（无需渲染模板，直接返回HTML片段）：

@app.route('/')
def main():
    return render_template('interface.html')

@app.route('/api/ordergrade/')
def ordergrade_api():
    return sort.orderbygrade(True, False).to_html()

# 其他功能对应的API路由同理添加

前端修改 #

在页面中添加内容容器，并编写JS逻辑加载内容：

<!DOCTYPE html>
<html>
  <head>
    <title>xxxxxxxxxxxxxx</title>
  </head>
  <body>
    <h1>Options</h1>
    <p>Click on the buttons below to load content.</p>
    <button onclick="loadContent('ordergrade')">1</button>
    <button onclick="loadContent('orderuniversity')">2</button>
    <button onclick="loadContent('showopts')">3</button>
    <button onclick="loadContent('delete')">4</button>
    <button onclick="loadContent('infnum')">5</button>
    <button onclick="loadContent('supnum')">6</button>
    <!-- 用于展示加载的内容 -->
    <div id="content-area"></div>

    <script>
      function loadContent(endpoint) {
        // 发起请求获取内容
        fetch(`/api/${endpoint}/`)
          .then(res => res.text())
          .then(html => {
            // 将内容插入到页面中
            document.getElementById('content-area').innerHTML = html;
            // 可选：更新地址栏hash，保持URL状态
            window.location.hash = endpoint;
          });
      }
    </script>
  </body>
</html>

方案3：监听Hash变化触发加载（进阶单页模式） #

如果希望通过地址栏hash变化来触发内容加载（比如用户直接访问带hash的URL也能加载对应内容），可以监听hashchange事件：

<script>
  // 监听hash变化
  window.addEventListener('hashchange', handleHashChange);
  // 页面加载时如果有hash，自动加载对应内容
  window.addEventListener('load', handleHashChange);

  function handleHashChange() {
    const endpoint = window.location.hash.slice(1); // 去掉开头的#
    if (endpoint) {
      fetch(`/api/${endpoint}/`)
        .then(res => res.text())
        .then(html => {
          document.getElementById('content-area').innerHTML = html;
        });
    }
  }
</script>

此时按钮可以保留原来的hash修改逻辑，或者调用loadContent函数，两种方式都能触发内容加载。

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