Moving Around With LinkTo
You’ll learn how to use the LinkTo method to navigate between routes in this lesson.
We can vastly improve user experience by providing links to the bands and songs pages instead of making users type into the URL bar.
Let’s add a navigation header that contains two links to navigate between the routes. This should be added to the application template, so it’s present on all pages of the application. Ember has a built-in way to go to the application’s routes, called the LinkTo component. Let’s add a simple navigation header just below the site header:
{{!-- app/templates/application.hbs --}}{{page-title "Rock & Roll with Octane"}}<div class="bg-blue-900 text-gray-100 p-8 h-screen"><div class="mx-auto mb-4"><div class="h-12 flex items-center mb-4 border-b-2"><a href="#"><h1 class="font-bold text-2xl">Rock & Roll <span class="font-normal">with Octane</span></h1></a></div><nav class="h-8 flex items-center mb-8" role="navigation"><LinkTo class="hover:text-gray-500" @route="bands">Bands</LinkTo><LinkTo class="hover:text-gray-500 ml-4" @route="songs">Songs</LinkTo></nav>{{outlet}}</div></div>
Now when we load the application at /, here is what we see.
Note: The code below may take a while to run. When you click on “Songs,” you will see the songs we added earlier. However, when you click on “Bands,” you will see nothing because we have not added bands yet.
{{page-title "Bands"}}
{{outlet}}The application template is rendered with the proper links in the header. Clicking on them will take us to the bands or songs routes, respectively.
The songs page should show the list of songs we’d added earlier. However, clicking ...