Vue JS Options API Working with Routes Using Router
STEP 01: When you initialize the Vue Application using Webpack, make sure to say yes to the Vue-router. It will create a router folder in your project with index.js in it.

STEP 02: Create a new component named Login.vue
and add the scaffold.
<template>
<h1>Login Page</h1>
</template>
<script>
export default {};
</script>
STEP 03: Go to the router/index.js
file and import the Login Component at the top.
import Login from '@/components/Login'
STEP 04: Add an object inside the router array.
export default new Router({
routes: [{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
When the /login URL is visited, the login component will be visible. The name
property will be useful when you want to go to the /login
route programmatically from the other component.
<router-link :to="{name: 'Login'}">Login</router-link>
You could do something like this, but it’s not recommended:
<router-link to="/login">Login</router-link>