How to create Vue routes
Prerequisite: You have to have the Vue Router installed, if not, read on how to do so here.
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:
- 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>