The `router-link` Component in Vue

May 13, 2020

The router-link component creates an <a> tag that's configured to work correctly with Vue router. For example, given the below Vue code:

const router = new VueRouter({
  routes: [
    { path: '/home', component: { template: '<h1>Home</h1>' } },
    { path: '/about', component: { template: '<h1>About Us</h1>' } }
  ]
});

const app = new Vue({
  router,
  template: `
    <div id="rendered-content">
      <div>
        <router-link to="/home">Home</router-link>
        <router-link to="/about">About Us</router-link>
      </div>
      <div>
        <router-view></router-view>
      </div>
    </div>
  `
}).$mount('#content');

Vue will render the below HTML. Note that <router-link> becomes a plain-old <a> tag.

<div>
  <a href="#/home" class="">Home</a>
  <a href="#/about" class="">About Us</a>
</div>
<div><!----></div>

With the above example, you can write your own <a> tags instead of going through <router-link>, but then you would need to do extra work to support named routes and HTML5 mode.

Custom Tags

The router-link component supports a neat tag prop that lets you specify a custom tag to use for navigation, as opposed to the default <a>. For example, here's how you can use buttons for navigation instead of <a> tags:

const app = new Vue({
  router,
  template: `
    <div id="rendered-content">
      <div>
        <router-link to="/home" tag="button">Home</router-link>
        <router-link to="/about" tag="button">About Us</router-link>
      </div>
      <div>
        <router-view></router-view>
      </div>
    </div>
  `
}).$mount('#content');

Vue would render the below HTML:

<div>
  <button class="">Home</button>
  <button class="">About Us</button>
</div>
<div><!----></div>

Looks like the buttons don't do anything, but Vue Router registered event handlers to make clicking on the buttons trigger navigation as shown below.


Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!