Creating a link in Vue

An article, posted almost 6 years ago filed in components, style, css, html, frontend, link, a, href, vue & coffeeandorange.

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!

Op de hoogte blijven?

Maandelijks maak ik een selectie artikelen en zorg ik voor wat extra context bij de meer technische stukken. Schrijf je hieronder in:

Mailfrequentie = 1x per maand. Je privacy wordt serieus genomen: de mailinglijst bestaat alleen op onze servers.