如何使破折号中的选项卡具有不同的 URL？

Question

我正在使用 DASH 库，我的应用程序现在有多个选项卡，但我需要让每个选项卡都有不同的 URL，有人做到了吗？

Answer 1

如果您想在 select 编辑新标签时更改地址栏中显示的 URL，您可以添加 dcc.Location 组件并使用 dcc.Link select 您的标签页的组件。您的 dcc.Location 组件是标签更改的输入。

官方文档中的例子是这样做的：

https://dash.plot.ly/urls

Answer 2

正如@papalagi here 所建议的，唯一对我有用的方法是使用两个 dcc.Location 组件（一个作为 "input" url 和一个作为 "output" url) 并编写两个回调：

当 url (dcc.Location) 更改并更新所选选项卡 (dcc.Tabs)
当所选选项卡更改 (dcc.Tabs) 并更新显示的 url (dcc.Location)

由于这种情况意味着循环依赖，它解释了需要两个 dcc.Location 个对象。

查看代码，我实现了一个解决方案，其中每个选项卡在同一页面中都有自己的散列，但可以更改此方法以更新整个路径而不是散列。

首先，在应用程序的布局中，我包含两个 dcc.Location 组件。

app.layout = dhc.Div([
   dcc.Location(id='url', refresh=False),
   dcc.Location(id='url-output', refresh=False),
   dhc.Div(id='page-content')
])

然后，我编写回调：

@app.callback(
    inputs=[Input('url', 'hash')],
    output=Output('main-tabs', 'value'))
def update_tab(hashh):
    print('>>> UPDATE TAB', hashh)
    return hash_tabs_value_dict.get(hashh.lstrip('#'), 'tab-1')


@app.callback(
    inputs=[Input('main-tabs', 'value')],
    output=Output('url-output', 'hash'))
def update_tab_hash(tab_value):
    print('>>> UPDATE HASH', tab_value)
    return '#' + tabs_value_hash_dict.get(tab_value, '')

P.S。在 hash_tabs_value_dict 和 tabs_value_hash_dict 中，我有几个字典存储选项卡值（'tab-1'、'tab-2'、...）和我想要的所需值之间的映射显示。

如何使破折号中的选项卡具有不同的 URL？

How to make a tab in dash have a different URL?

python

plotly-dash