The vue-router plugin provides us with another handy special component--<router-link>. It is a component that will change to a specified route when clicked thanks to its to prop. By default, it will be a <a> HTML element, but this can be customized with the tag prop.
For example, a link to the FAQ page would be:
<router-link to="/faq">FAQ</router-link>
The to prop can also get an object with the name property instead of the path:
<router-link :to="{ name: 'faq' }">FAQ</router-link>
This will dynamically generate the correct path for the route. I recommend you to use this second method as opposed to only specifying the path--that way, if you change the paths of your routes, your navigation links will still work.
When using the object notation, don't forget to bind the to prop with v-bind or the : shorthand, or else the router-link component will get a string and won't understand it's an object.
Now we can add the links to our NavMenu component:
<template>
<nav class="menu">
<router-link :to="{ name: 'home' }">Home</router-link>
<router-link :to="{ name: 'faq' }">FAQ</router-link>
</nav>
</template>
You should now have a working menu in the app:
