Ember.js RouterService replaceWith() Method
Last Updated :
09 Mar, 2023
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which is based on Model-View-Controller (MVC) architecture. Ember.js is one of the most widely used front-end application frameworks. It is made to speed up development and increase productivity. Currently, it is utilized by a large number of websites, including Square, Discourse, Groupon, Linked In, Live Nation, Twitch, and Chipotle.
The replaceWith() method of the RouterService is used to replace the current route with a new route in the application’s URL history. This method works similarly to the transitionTo() method, but instead of adding a new entry to the history, it replaces the current entry.
Syntax:
this.router.replaceWith(routeName, models, options );
Parameters:
- routeName: It is the URL for the desired location.
- model: It is an object of params to pass to the destination route.
- options: It is a hash containing queryParams property.
Return type: Transition object associated with the transition.
Steps to Install and Run Ember.js:
Step 1: To run the following examples you will need to have an ember project with you. To create one, you will need to install ember-cli first. Write the below code in the terminal:
npm install ember-cli
Step 2: Now you can create the project by typing in the following piece of code:
ember new <project-name> --lang en
To start the server, type:
ember serve
Example 1: Type the following code to generate the route for this example:
ember generate route first
app/routes/first.js
Javascript
import Route from '@ember/routing/route' ;
import { } from '@ember/array' ;
import EmberObject from '@ember/object' ;
export default class FruitsRoute extends Route {
model() {
return 'RouteService' ;
}
setupController(controller, model) {
super .setupController(controller, model);
}
}
|
app/controllers/first.js
Javascript
import Controller from '@ember/controller' ;
import { inject as service } from '@ember/service' ;
import { action } from '@ember/object' ;
export default class MyController extends Controller {
@service router;
@action
GoTo() {
this .router.replaceWith( 'second' )
}
}
|
app/templates/first.hbs
HTML
{{page-title "RouteService"}}
< h1 >Welcome to the First Route</ h1 >
< button {{action "GoTo"}}>GoTo Second-route</ button >
{{outlet}}
|
app/templates/second.hbs
HTML
{{page-title "RouteService"}}
< h1 >Welcome to the Second Route</ h1 >
{{outlet}}
|
Output:
output1
Example 2: In this example, we will pass the dynamic segment to the replaceWith() method. Type the following code to generate the route for this example:
ember generate route my-route
app/routes/my-route.js
Javascript
import Route from '@ember/routing/route' ;
import { } from '@ember/array' ;
import EmberObject from '@ember/object' ;
export default class FruitsRoute extends Route {
model() {
return 'RouteService' ;
}
setupController(controller, model) {
super .setupController(controller, model);
}
}
|
app/controllers/my-route.js
Javascript
import Controller from '@ember/controller' ;
import { inject as service } from '@ember/service' ;
import { action } from '@ember/object' ;
export default class MyController extends Controller {
@service router;
@action
GoTo(temp) {
this .router.replaceWith( 'other-route' , 123)
}
}
|
app/templates/my-route.hbs
HTML
{{page-title "RouteService"}}
< h1 >Welcome to the My Route</ h1 >
< button {{action "GoTo"}}>GoTo Other-route</ button >
{{outlet}}
|
app/templates/other-route.hbs
HTML
{{page-title "RouteService"}}
< h1 >Welcome to the Other Route</ h1 >
{{outlet}}
|
Output:
output2
Reference: https://api.emberjs.com/ember/4.9/classes/RouterService/methods/replaceWith?anchor=replaceWith
Share your thoughts in the comments
Please Login to comment...