Utilisation de History.js pour les applications d'une seule page

Question

Je suis en train de construire une application d'une seule page, je souhaite utiliser History.js pour gérer l'état des applications. Je l'ai travaillé comme vous le souhaitez en ce qui concerne le fait de cliquer sur les liens et la vue en cours d'acheminement en conséquence. Le problème est lorsque je rafraîchis l'écran avec un changement de route url en place. Je sais que c'est parce que mon serveur capture le/et tente de trouver le répertoire sur le serveur. Je n'ai jamais rencontré ce problème avant d'utiliser #! ou # pour séparer les paramètres du côté client.

app.html/madeUpPage/

Mon serveur essaie de trouver le répertoire madeUpPage lorsque l'actualisation ou l'entrée via la liaison se produit. Comment contourner cela dans une application côté client avec HistoryJS?

Les charges du client index.html et scénarisé qu'il contient les params et parse exécute comme prévu avec cette configuration d'url: app.html # madeUpPage

J'ai essayé History.options.html4Mode = true et aussi window.History = { options: { html4Mode: true} } cependant avec l'histoire. js v1.8b2 cela ne semble pas fonctionner pour moi.

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

      }); 
}); 

J'ai essayé aussi ce fil: Force html4 fallback in history.js

Merci à tous ceux qui peuvent offrir de l'aide.

Answer 1

Mettre un? dans l'URL via l'historique JS sur pushState est ce qui a résolu ce problème!

Ainsi, au lieu de ..

**Before** 

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

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