Vue.js
0 Lessons
Next Previous

2 Create A Route

111

1. When you initialize 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, 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>

Next Previous