How to create Vue routes

Prerequisite: You have to have the Vue Router installed, if not, read on how to do so here.

routes

Add routes to switch between components in SPA (Single page application), or switch between pages (as the term goes for regular websites which does a page reload).

Go to main.js , then:

1. Create routes and store them in an array constant.

const routes = []

2. The array takes objects with 2 properties

• path matching, and
• its respective component to where the route will go to.

const routes = [
{path: '/', component: HomePage},
{path: '/services', component: Services}
]

3. Import components

import HomePage from './components/HomePage.vue'
import Services from './components/Services.vue'

4. Instantiate router. This is already done in the router constant - See code here.

5. To switch between routes, modify the navigation in the Header component, using router-link tag for navigation instead of the href attribute. Also, use to attribute to direct the path to the specific component

<router-link to="/"><a ..>home</a><router-link>
<router-link to="/menu"><a ..>menu</a><router-link>