如何在Dash多页面应用中检测页面切换并保存数据？

我正在开发一个Dash多页面Web应用，项目结构如下：

- project/
  - pages/
     - home.py
     - contact.py
     - graph.py
  - app.py
  - index.py

在app.py中，我使用dcc.Location(id="url", refresh=True)组件，通过回调将不同页面加载到html.Div(id="page-content")中，侧边栏的navlinks可成功实现页面切换。

当我从home页面（localhost/home）切换到contact页面（localhost/contact）时，希望在离开home页面前将数据保存到dcc.store组件中。我尝试在assets目录下创建custom-script.js，通过visibilitychange事件触发隐藏按钮的回调：

document.addEventListener('visibilitychange', e=>{
    if (document.visibilityState === 'visible') {
        console.log("user is focused on the page")
   } else {
    // code to trigger button click event to activate callback
    console.log("user left the page")
   }  
});

但发现页面切换时该事件并未触发，仅通过浏览器刷新按钮硬刷新home页面时事件才会生效。请问是否有其他基于Dash或JavaScript的页面切换检测方法？

方法一：利用Dash原生回调监听URL变化 #

因为你的页面切换是通过dcc.Location的pathname变化实现的，直接监听这个属性的变化就能精准捕获页面切换行为，无需额外JS。

实现步骤： #

1. 在全局布局（比如app.py）中定义一个dcc.Store组件，用于存储home页面的数据。
2. 编写回调，监听dcc.Location的pathname，当路径从/home切换到其他值时，将home页面的目标数据存入dcc.Store。

示例代码：

# 可写在app.py或home.py中
from dash import callback, Output, Input, State, PreventUpdate

@app.callback(
    Output("home-data-store", "data"),
    Input("url", "pathname"),
    State("home-input", "value"),  # 替换为你需要保存的home页面组件ID
    prevent_initial_call=True,
)
def save_home_data_on_leave(current_path, home_data):
    # 仅当离开home页面时执行保存
    if current_path != "/home":
        return home_data
    # 仍在home页面时不更新Store
    raise PreventUpdate

全局布局中添加Store：

# app.py的layout部分
app.layout = html.Div([
    dcc.Location(id="url", refresh=True),
    dcc.Store(id="home-data-store"),
    html.Div(id="page-content")
])

方法二：JavaScript监听单页应用URL变化 #

单页应用切换页面时不会触发页面刷新，visibilitychange事件仅在页面失去浏览器焦点时生效，因此需要监听URL的主动变化。

修改assets/custom-script.js： #

let previousPath = window.location.pathname;

// 监听浏览器前进/后退导致的URL变化
window.addEventListener('popstate', () => {
    const currentPath = window.location.pathname;
    handlePageLeave(previousPath, currentPath);
    previousPath = currentPath;
});

// 监听导航链接点击导致的URL变化
document.addEventListener('click', (e) => {
    const link = e.target.closest('a');
    if (link && link.href) {
        const url = new URL(link.href);
        if (url.origin === window.location.origin) {
            const targetPath = url.pathname;
            if (previousPath !== targetPath) {
                setTimeout(() => {
                    handlePageLeave(previousPath, targetPath);
                    previousPath = targetPath;
                }, 0);
            }
        }
    }
});

// 处理离开home页面的逻辑
function handlePageLeave(fromPath, toPath) {
    if (fromPath === '/home') {
        console.log('Leaving home page, saving data...');
        // 触发隐藏按钮的点击事件，触发Dash回调
        document.getElementById('save-home-btn').click();
    }
}

在home页面添加隐藏按钮和对应回调： #

# home.py的layout部分
layout = html.Div([
    # 其他页面内容
    html.Button(id="save-home-btn", style={"display": "none"}),
    dcc.Store(id="home-data-store")
])

# 保存数据的回调
@app.callback(
    Output("home-data-store", "data"),
    Input("save-home-btn", "n_clicks"),
    State("home-input", "value"),  # 替换为实际需要保存的组件
    prevent_initial_call=True,
)
def save_home_data(n_clicks, home_data):
    return home_data

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