URL di aggiornamento del router con replaceState invece

Puoi impedire di aggiungere un elemento alla cronologia del browser utilizzando la transizione replaceState. È possibile specificarlo utilizzando l' hash di configurazione queryParams sulla route e optare per una transizione replaceState impostando la transizione replace su true.

Sintassi

Ember.Route.extend ({
   queryParams: {
      queryParameterName: {
         replace: true
      }
   }
});

Esempio

L'esempio riportato di seguito mostra come aggiornare un URL con la transizione replaceState. Crea un nuovo percorso e chiamalo paramreplaceState e apri il file router.js per definire le mappature URL -

import Ember from 'ember';                   
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config 

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

//Defines URL mappings that takes parameter as an object to create the routes
Router.map(function() {
   this.route('paramreplaceState');
});

//It specifies Router variable available to other parts of the app
export default Router;

Apri il file application.hbs creato in app / templates / con il seguente codice:

<h2>Update URL with replaceState</h2>
{{#link-to 'paramreplaceState'}}Click Here{{/link-to}}

Quando fai clic sul collegamento sopra, la pagina dovrebbe aprirsi con un pulsante per modificare l'URL dopo aver fatto clic su di esso. Apri il file paramreplaceState.hbs con il codice seguente:

//sending action to the addQuery  method
<button {{action 'change'}}>Replace State</button>
{{outlet}}

Ora apri il file paramreplaceState.js creato in app / controllers / che viene visualizzato dal router quando si entra in una rotta -

import Ember from 'ember';
var words = "tutorialspoint";

export default Ember.Controller.extend ({
   queryParams: ['query'],
   actions: {
      change: function() {

         //assigning value of variable 'words' to the 'query' i.e. query parameter
         this.set('query', words);
      }
   }
});

Ora usa la configurazione queryParams sulla route con il rispettivo controller e imposta la proprietà di configurazione di sostituzione su true nel file paramreplaceState.js creato in app / routes / .

import Ember from 'ember';

export default Ember.Route.extend ({
   queryParams: {
      query: {
         //assigning replace state as true
         replace: true
      }
   }
});

Produzione

Esegui il server ember e riceverai il seguente output:

Quando fai clic sul collegamento, viene visualizzato il pulsante che invia un'azione al metodo addQuery -

Dopo aver fatto clic sul pulsante, verrà visualizzato il valore del parametro a destra del "?" in un URL -