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.


More Vue Tutorials