History.js Verwendung für einzelne Seite Anwendungen

Question

Ich bin dabei, eine einzelne Seite Anwendung zu erstellen, ich möchte History.js für die Verwaltung des Anwendungsstatus verwenden. Ich habe es funktioniert so weit wie mit dem Klicken auf die Links arbeiten und die Ansicht entsprechend geroutet wird. Das Problem ist, wenn ich den Bildschirm mit einer URL-Route Änderung an Ort und Stelle aktualisieren. Ich weiß, dass der Grund dafür ist, weil mein Server das/auffängt und versucht, das Verzeichnis auf dem Server zu finden. Ich habe nie auf dieses Problem gestoßen, bevor ich # verwendet habe! oder # um die clientseitigen Parameter zu trennen.

app.html/madeUpPage/

Mein Server versucht, das madeUpPage zu suchen, wenn die Refresh-oder Eingabe über die Verbindung geschieht. Wie umgehen Sie das in einer clientseitigen Einzelseitenanwendung mit HistoryJS?

Die Client-Lasten index.html und die darin enthaltenen Skriptmodus in sich die params analysiert und führt wie bei dieser Konfiguration der URL erwartet: app.html # madeUpPage

I History.options.html4Mode = true und auch window.History = { options: { html4Mode: true} } jedoch mit Geschichte versucht haben. js v1.8b2 das scheint nicht für mich zu arbeiten.

'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(){ 
       }); 

      }); 
}); 

Ich habe auch versucht, dieses Thema anschauen: Force html4 fallback in history.js

Dank an alle, die etwas Hilfe anbieten können.

Answer 1

Setzen eines? in der URL über die Geschichte JS auf pushState ist, was dieses Problem gelöst hat!

Also statt ..

**Before** 

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

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