Simple routes example in Vue

Install vue-router:

terminal
npm i vue-router@next

Let's assume that you want to create a component with 2 routes. Configure main.js as follows:

javascript
import { createApp }                      from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Router                             from './Router.vue'
import Home                               from './Home.vue'
import About                              from './About.vue'

const routes = [
    {path: '/',         component: Home},
    {path: '/about',    component: About}
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

createApp(Router).use(router).mount('#app')

Define Router.vue:

vue
<template>
    <router-view></router-view>
</template>

Define Home.vue:

vue
<template>
    Hello, this is the home.
</template>

Define About.vue:

vue
<template>
    This is the about page.
</template>