How to create a route in vue.js

Javascript Vue.js

1. when you initliaze vue application using webpack, make sure to say yes to the vue-router which will create a router folder with the index.js in it into your project.

2. Create a new component named Login.vue and add the scaffold

Login.vue

<template>
    <h1>Login Page</h1>
</template>
<script>
export default {};
</script>

3.  Go to the router/index.js file and import Login Component at the top

import Login from '@/components/Login'

4. Add an object inside router array 

export default new Router({
  routes: [{
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

when /login url is visited, Login component will be visible. name property will be useful when you want to go 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>

 

 

 

 

Comments Count: 0 0