Vue Router

Just using Vue 3 on it’s own , you can accomplish a great deal. But as with all frameworks, some tasks are just so common and repetitive that libraries have sprung up to make them easier to do. One of these tasks is Routing, which you can do without using Vue Router, but it is much more time consuming and the resulting code is messier and harder to understand.

Vue Router is a separate NPM package you can install which gives you a central location where you can specifiy which routes are available to your site users. A very important addition to this is the ability to see the route in the address bar as a different URL. One of the main problems with Vue SPA’s (Single Page Applications) is that every route on the site has the same address, because Vue JS is loading in the content, and you, the user, are not actually leaving that main site URL, you are are not making an HTTP request to the server at all. Sure , content might be being pulled from a database, but it is being done without leaving the page at all.

npm install --save vue-router@next

To install Vue router to your current project all you have to do is use the Node Packet Manager (NPM) to pull it in and save it , as above. The next step is to add it as an import to the main.js file. You then add it as a constant and provide an object with all the routes in. The final configuration for main.js could look like this.

import { createApp } from 'vue';
import { createRouter, createWebHistory} from 'vue-router';
import App from './App.vue';
const router = createRouter({
history: createWebHistory(),
routes: []
});
const app = createApp(App)
app.mount('#app');

Note the use of the history parameter in the code above. This is optional but almost always used, as it provides a similar functionality to the history you get from a browser. Without this option you cannot use the back button with Vue routes, which is expected behaviour for your users.

You can also separate the routes file completely, and if you had a large and complex site with hundreds of routes then a separate file system for routing would be a must, as otherwise main.js would become too large and hard to read.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/handicaps',
    name: 'handicaps',
    component: Handicaps,
    props: true
  },
  {
    path: '/handicaps/:id',
    name: 'HandicapDetails',
    component: HandicapDetails,
    props: true
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

In the code above I have added routes as a separate file to be imported into the router object. The router code would then look like this.

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router 

Once this has been done the router can imported and the routes used. The main.js file is kept lean and simple, with all the complex code imported in, like this.

import { createApp } from 'vue'
import store from './store/index.js'
import App from './App.vue'
import router from './router'
createApp(App).use(router).use(store).mount('#app')

Once this has been setup you can use routes in your pages by utilising <router-link>.

 <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/handicaps">Handicaps</router-link>
  </div>

This creates a nice simple nav section. The contents of the route are then displayed in the <router-view> section of the page.

 <router-view/>

So using the code above, you can see that if you click the about link, the router will check which component is required to be rendered in the <router-view> tag and pull in the About component.

Styling

How about active links and styling them? This is easy as Vue automatically adds style tags to rendered links. You can of course change the names of these in the router object, but for most use cases the default names are fine, here is an example of how they are styled.

#nav a.router-link-exact-active {
  color: #42b983;
}

The Vue styles api can be found here.

This is a very brief intro to Vue router, it is a powerful and flexible tool and can be extensively configured and tweaked depending on what you need to do. Any project with multiple pages will benefit from this, as it nullifies the drawbacks that SPA’s inherently possess.