History.js用于单页应用程序



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

app.html/madeUpPage/

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

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

我尝试过History.options.html4Mode = truewindow.History = { options: { html4Mode: true} },但使用了History.jsv1.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(){
              });
            });
});

我也尝试过这个线程:在history.js 中强制html4回退

感谢任何能提供帮助的人。

放置?在URL中通过历史JS在pushState上解决了这个问题!

所以。。

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

相关内容

  • 没有找到相关文章

最新更新