我正在构建一个单页应用程序,我希望使用History.js来管理应用程序状态。我让它按照需要工作,只要点击链接和相应的视图即可。问题是当我刷新屏幕时,url路由发生了变化。我知道发生这种情况的原因是因为我的服务器正在捕获/并试图在服务器上查找目录。在使用#之前,我从未遇到过这个问题!或#来分隔客户端参数。
app.html/madeUpPage/
当刷新或通过链接进入时,我的服务器正在尝试查找madeUpPage目录。在使用HistoryJS的客户端单页应用程序中,如何解决这一问题?
客户端加载index.html,其中包含的脚本解析params,并使用以下url配置按预期执行:app.html#madeUpPage
我尝试过History.options.html4Mode = true
和window.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}`);