Creating a link in Vue

Any HTML is legal, so you can just write a regular link, but if you want to have a fast response, it is recommended that you include Vue Router. This brings two important tags: <router-link>, which this post is mainly about and <router-view>.

Creating a link in Vue is as simple as:

<router-link to="home">Home</router-link>

This renders a perfectly correct link, using the earlier mentioned a-tag. It even adds a nice bonus, adding an ‘active’ class when that route is active. If you prefer this class on the containing element, do this:

<router-link to="home" tag="li"><a>Home</a></router-link>

This will render something along the lines of:

<li><a href="home">Home</a></li>

Be aware: this is the only valid use-case for the tag-property in vue’s router-link component. Hence be wary if you come across any use of the tag-property, but Vue’s default is good.

You pick up on this link by defining the route ‘home’, make sure your app contains a and attach a component to this route. In the most basic form:

<div id="app">
  <nav role="menu">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view></router-view>
</div>

The JS:

const Home = {template: '<div><h1>Home</h1></div>'}
const About = {template: '<div>h1>About</h1></div>'}

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

const app = new Vue({
  router
}).$mount('#app')

See here for a minimal vue Router Example on CodePen.

That’s it. If you enjoy my sensible approach to front-end web development, don’t forget to subscribe below!