2016-08-02 4 views
0

Я занимаюсь созданием одностраничного приложения, я хочу использовать History.js для управления состоянием приложений. Я работаю по своему желанию, работая с щелчком по ссылкам и соответствующим образом маршрутизируемым представлением. Проблема в том, что я обновляю экран с изменением маршрута URL-адреса. Я знаю, что причина в том, что это происходит потому, что мой сервер захватывает/и пытается найти каталог на сервере. Я никогда не сталкивался с этой проблемой, прежде чем использовать #! или #, чтобы отделить параметры клиентской стороны.Использование History.js для приложений с одной страницей

app.html/madeUpPage/

Мой сервер пытается найти каталог madeUpPage, когда обновление или запись по ссылке происходит. Как вы обходите это в одностраничном приложении на стороне клиента с помощью HistoryJS?

Клиент загружает index.html и скриптовых содержащиеся в нем разбирает Params и выполняет, как ожидается, с этой конфигурацией URL: app.html # madeUpPage

Я попытался History.options.html4Mode = true и также window.History = { options: { html4Mode: true} } однако с историей. js 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

Ввод? в URL через историю JS на pushState - это то, что решило эту проблему!

Таким образом, вместо ..

**Before** 

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

click (()=> History.pushState({ 
      route: route 
      }, document.title + ' '+ route, 
      `?view=${route}`); 
Смежные вопросы