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>