Introducing Vue-Router and Loading URL-Based Components Chapter 8It is highly advised to use the router-link element wherever possible, as it carries several
advantages over the standard link:
Mode changes: The first advantage is linked to the mode of the router. Using the
router link allows you to change the mode of your router, say from hash to
history, and not have to change every single link in your app.
CSS classes: Another advantage that comes with using the router link is a CSS
class that gets applied to links active in the "tree" and pages which are currently
being viewed. Links in the tree are parent pages which also include the root page
(for example, any links to "/" will always have the active class). This is one of the
big benefits of using the router, as adding and removing these classes manually
would require complex coding. These classes can be customized and we will do
that later.
URL parameters and named routes: The other advantage to using the router
element is the power it gives you over using named routes and passing URL
parameters. This further allows you to have one source of truth for the URL of a
page and use names and shortcuts to reference a route. More on this will be
covered later in the chapter.Add the links to your pages within your view so you can navigate between pages. Within
the
For each page, add a new list item with a router-link element inside. Add a to attribute
to the link path:
<nav>
<ul>
<li>
<router-link to="/">Home</router-link>
</li>
<li>
<router-link to="/about">About</router-link>
</li>
</ul>
</nav>Viewing the app in the browser should show your two links, allowing you to switch
between the two content pages. You will also notice that, by clicking the link, the URL
updates too.