javascript - 单页应用程序中的历史记录.pushState/后退按钮/导航

Question

我正在构建一个带有导航的小型单页应用程序。这些页面位于 div 容器中，通过单击链接显示。页面更改的代码

        // show the given page, hide the rest
        function show(elementID) {
            history.pushState({ 
                plate_id: 1, 
                plate: elementID 
            }, null, elementID);
            goTo(elementID);
        }
        function goTo(elementID) {
            var ele = document.getElementById(elementID);
            if (!ele) {
                console.log("fail");
                return;
            }
            // get all pages, loop through them and hide them
            var pages = document.getElementsByClassName('page');

            for(var i = 0; i < pages.length; i++) {
                pages[i].style.display = 'none';
            }
            // then show the requested page
            ele.style.display = 'block';
        }
        window.onpopstate = function (event) {  
              var content = "";
              if(event.state) {
                content = event.state.plate;
              }
              if (content != '') goTo(content);
        }

链接看起来像

<a href="#" onclick="show('Page_1');" id="1">page 1</a>

和 div

<div id="Page_1" class="page" style="">

现在，当我使用链接时，网址会更改为 .../Page_1# 或 .../Page_2# 并且直接显示页面。现在，如果我使用后退按钮(自己的或浏览器无关紧要)，就会发生一些我不明白的魔法。

例如

1. 点击第一个链接 -> 转到 ../Page_1#(直接，一切都很好)
2. 点击第二个链接 -> 转到 ../Page_2#(直接，一切都很好)
3. 使用后退按钮 -> 转到 ../Page_2(没有 #，什么也不会发生，但应该转到 Page_1???!!)
4. 再次使用后退按钮 -> 转到 ../Page_1#(没有任何反应)
5. 再次使用后退按钮 -> 转到 ../Page_1(第 1 页正在加载)

我不明白为什么第三步和第四步中的想法会发生!如果有人能帮助我那就太好了

Answer 1

也许您希望链接的 onclick 为:onclick="show('Page_1'); return false;" 或 onclick="return show( 'Page_1');" 和您的显示函数以 return false; 结束。

通过返回 false，浏览器实际上不会遵循 href="#"，而只是执行 JavaScript。