单页应用程序的History.js用法

时间:2016-08-02 01:36:48

标签: javascript routing history.js html5-history hashchange

我正在构建单页面应用程序,我希望使用History.js来管理应用程序状态。只要单击链接并相应地路由视图,我就可以按需工作。问题是当我刷新屏幕时,网址路由发生了变化。我知道发生这种情况的原因是因为我的服务器正在捕获/并试图在服务器上找到该目录。在使用#之前我从未遇到过这个问题!或#将客户端params分开。

app.html / madeUpPage /

当刷新或通过链接进入时,我的服务器正在尝试查找madeUpPage目录。您如何在使用HistoryJS的客户端单页应用程序中解决这个问题?

客户端加载index.html,其中包含的脚本解析了params,并按照url的这个配置按预期执行: app.html#madeUpPage

我使用History.js尝试了History.options.html4Mode = truewindow.History = { options: { html4Mode: true} } v1.8b2这似乎不适合我。

'use strict';
window.History = {options: {html4Mode: true} };
require(['js/client-config.js',
         'js/lib/history-nativejs.js',     // History.js in raw JavaScript, very nice 3rd party utility... used for routing
         'js/lib/libweb-ui.js',
         'js/lib/libweb-ajax.js', // LibWeb ajax
         'js/lib/libweb-jsml.js', // This is the file needed for JSML to run, parse and render your application (main core file)
         'js/model.js',
         'js/portfolio.js', // Main class containing viewstate 
         'js/global.js', // The global view model shared for all views in the SPA
         'js/index.js',  // The initial payload required to load the default application content (index/default.js)
         'js/router.js',
         'js/layout.js',
         ], // This takes the raw JavaScript objects places them how they will appear in the layout (the "master page")


          function coreScriptsLoadedSuccess() {

            require(['js/controller.js'], function(){

              var appController = new PortfolioClientController(defaultAppState);

              require(['js/events.js'], function domLoadSuccess(){
              });

            });
});

我也试过这个帖子:Force html4 fallback in history.js

感谢任何可以提供帮助的人。

1 个答案:

答案 0 :(得分:0)

放一个?在URL中通过历史记录JS on pushState解决了这个问题!

所以不是..

**Before**

click (()=> History.pushState({ 
             route: route 
           }, document.title + ' '+ route, 
           route);
**Now**

click (()=> History.pushState({ 
             route: route 
           }, document.title + ' '+ route, 
           `?view=${route}`);