EmberJS - Links

The {{link-to}} component can be used to create a link to a route.

Syntax

{{#link-to route}}
   //code here
{{/link-to}}

The following table lists down the properties of the links −

S.No.	Links & Description
1	Multiple Segments For multiple segments, you can provide model or an identifier for each segment if the route is nested.
2	Using Link-to as an Inline Helper Use the link-to as an inline component by providing link text as the first argument to the helper.
3	Adding Additional Attributes on a Link You can add the additional attributes on a link while creating it.
4	Replacing History Entries You can add entries to the browser's history while moving between the routes by using the link-to helper.

Example

The following example shows how to link to a different routes. Create a new route and name it as note and open the router.js file to define the URL mappings −

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('note');
});

export default Router;

Open the application.hbs file created under app/templates/ with the following code −

{{#link-to 'note'}}Click Here{{/link-to}}
{{outlet}}

When you click the above link, page should open the note.hbs file with the following text −

<h4>Welcome to TutorialsPoint</h4>
{{outlet}}

Output

Run the ember server and you will receive the following output −

When you click on the link, it will display the text from the template file as in the following screenshot −

emberjs_template.htm