URL de mise à jour du routeur avec replaceState à la place

Vous pouvez empêcher l'ajout d'un élément à l'historique de votre navigateur en utilisant la transition replaceState. Vous pouvez spécifier cela en utilisant le hachage de configuration queryParams sur la Route et opter pour une transition replaceState en définissant la transition replace sur true.

Syntaxe

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

Exemple

L'exemple ci-dessous montre comment mettre à jour une URL avec la transition replaceState. Créez une nouvelle route et nommez-la paramreplaceState et ouvrez le fichier router.js pour définir les mappages d'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;

Ouvrez le fichier application.hbs créé sous app / templates / avec le code suivant -

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

Lorsque vous cliquez sur le lien ci-dessus, la page devrait s'ouvrir avec un bouton pour changer l'URL après avoir cliqué dessus. Ouvrez le fichier paramreplaceState.hbs avec le code suivant -

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

Maintenant, ouvrez le fichier paramreplaceState.js créé sous app / controllers / qui est rendu par le routeur lors de la saisie d'une Route -

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);
      }
   }
});

Utilisez maintenant la configuration queryParams sur la Route avec le contrôleur respectif et définissez la propriété replace config sur true dans le fichier paramreplaceState.js créé sous app / routes / .

import Ember from 'ember';

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

Production

Exécutez le serveur de braises et vous recevrez la sortie suivante -

Lorsque vous cliquez sur le lien, il affiche le bouton qui envoie une action à la méthode addQuery -

Après avoir cliqué sur le bouton, il affichera la valeur du paramètre à droite du "?" dans une URL -