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