URL de atualização do roteador com replaceState em vez disso

Você pode evitar adicionar um item ao histórico do seu navegador usando a transição replaceState. Você pode especificar isso usando o hash de configuração queryParams no Route e optar por uma transição replaceState definindo a transição replace para true.

Sintaxe

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

Exemplo

O exemplo fornecido abaixo mostra como atualizar um URL com a transição replaceState. Crie uma nova rota e nomeie-a como paramreplaceState e abra o arquivo router.js para definir os mapeamentos de 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;

Abra o arquivo application.hbs criado em app / templates / com o seguinte código -

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

Ao clicar no link acima, a página deve abrir com um botão para alterar a URL após clicar nele. Abra o arquivo paramreplaceState.hbs com o seguinte código -

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

Agora abra o arquivo paramreplaceState.js criado em app / controllers / que é renderizado pelo roteador ao entrar em uma rota -

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

Agora use a configuração queryParams na rota com o respectivo controlador e defina a propriedade replace config como true no arquivo paramreplaceState.js criado em app / routes / .

import Ember from 'ember';

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

Resultado

Execute o servidor ember e você receberá a seguinte saída -

Quando você clica no link, ele exibe o botão que envia uma ação para o método addQuery -

Após clicar no botão, aparecerá o valor do parâmetro à direita do "?" em um URL -

↰ Previous page