MDC：单击浏览器的后退按钮时，drawer.open 未初始化

Question

我想使用drawer。我编写了基本代码，这样当用户单击导航按钮时，drawer.open 会被切换（即 true、false、true、false、...）。但是，如果用户通过单击抽屉菜单中的链接进入其他页面并通过单击浏览器的后退按钮返回，则drawer.open为true并且用户无法单击浏览器的导航按钮。

1. 用户打开页面：drawer.open=false。
2. 用户点击导航按钮：drawer.open=true。
3. 用户点击菜单中的链接：drawer.open=false 在新页面中。
4. 用户点击浏览器的返回按钮并返回：drawer.open=true。

为什么drawer.open=true 在 4. 中？我该如何解决这个问题？

Answer 1

当用户单击浏览器的后退按钮时，重新加载页面以初始化 JavaScript 变量。

<script>
        window.onpageshow = function(event) {
            if (event.persisted) {
                 window.location.reload();
            }
        };
</script>