是否需要任何服务器调整才能完全使用HTML5历史API？

Question

我正在使用HTML5历史记录API (在Chrome上)，链接如下：

http://jsbin.com/zuqijofole/1

您可以看到一个简单的应用程序，它显示/隐藏div (视图)。

使用浏览器向后和向前按钮脚本运行良好，但如果我直接在浏览器中键入以下地址(为了查看视图2)，http://jsbin.com/zuqijofole/2

找不到该文档。我需要第二个视图来显示。

我想知道：

• 我应该在服务器端实现一些映射URL的逻辑吗？哪一个 能用最新的PHP解决方案吗？
• 还是我遗漏了JS中的一些实现？

注意:解决方案应该在SPA应用程序中工作，所以所有数据都由JS应用程序呈现。

window.app = {
            data: {
                views: [
                        { id: 0, isActive: false },
                        { id: 1, isActive: false },
                        { id: 2, isActive: false },
                ]
            },
        start: function () {
            this.listeners();
            // default entry
            var activeView = this.wm.activeView;
            history.replaceState({ activeView: activeView }, document.title, document.location.href);

            window.app.wm.hideViews();
            window.app.wm.showView();

        },
        listeners: function () {
            window.addEventListener('popstate', function (event) {
                // fires when backing/forwarding in history
                console.log(event);
                console.log(window.history.state);
                this.wm.showHideBl(event.state);
            }.bind(this));

            var elm = document.getElementById('btn-prev');
            elm.addEventListener('click', function () {
                window.app.wm.snowPrevView();
            });

            elm = document.getElementById('btn-next');
            elm.addEventListener('click', function () {
                window.app.wm.snowNextView();
            });

        },
        wm: {
            activeView: 0, // default
            showView: function () {
                var elm = document.getElementById('view-' + this.activeView);
                elm.style.display = '';
            },
            showHideBl: function (data) {
                this.hideView();
                this.activeView = data.activeView;
                this.showView();
            },
            snowNextView: function () {
                // bl
                if (this.activeView < window.app.data.views.length - 1) {
                    this.hideView();
                    this.activeView++;
                    this.showView();
                    history.pushState({ activeView: this.activeView }, '', this.activeView);
                }
            },
            snowPrevView: function () {
                // bl
                if (this.activeView > 0) {
                    this.hideView();
                    this.activeView--;
                    this.showView();
                    history.pushState({ activeView: this.activeView }, '', this.activeView);
                }
            },
            hideView: function () {
                var elm = document.getElementById('view-' + this.activeView);
                elm.style.display = 'none';
            },
            hideViews: function () {
                window.app.data.views.forEach(function (item, index, array) {
                    var elm = document.getElementById('view-' + item.id);
                    elm.style.display = 'none';
                }.bind(this));
            }

        }
    };

Answer 1

是的，为了获得完全无缝的体验，您希望所有由History API创建的URL都映射到服务器可以使用的实际URL。

例如，如果您有一个表可以对客户端进行排序，则可以使用历史API将排序状态保存到URL中。服务器应该能够读取该URL，并在刷新页面时为已排序的表提供服务。

确保一切正常工作的最佳方法是禁用JavaScript，并确保仍然可以正确导航和使用站点(即使页面总是刷新)。