在vue.js+webpack環(huán)境搭建中我們已經(jīng)創(chuàng)建了一個項(xiàng)目，基于創(chuàng)建的項(xiàng)目，我們來增加一個路由用于用戶登錄。

修改router/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Hello from 'components/Hello'
import Login from 'components/Login'

Vue.use(Router)

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

然后我們來創(chuàng)建一個Login組件，在components中創(chuàng)建Login.vue文件，代碼如下：

<template>
    <div class="login">
        {{ msg }}
        <form>
            <p>
                用戶名：<input type="text" v-model="username">
            </p>
            <p>
                密碼：<input type="password" v-model="password">
            </p>
            <p>
                <button v-on:click="login($data)">登錄</button>
            </p>
        </form>
    </div>
</template>
<script>
export default {
  // 對應(yīng)class名字
  name: 'login',
  // 數(shù)據(jù)部分
  data () {
    return {
      msg: '',
      username: 'delicacylee',
      password: 'delicacylee'
    }
  },
  // 事件部分
  methods: {
    login (form) {
      if (form.username !== 'delicacylee' || form.password !== 'password') {
        this.msg = '您的用戶名和密碼不正確'
      } else {
        // 跳轉(zhuǎn)到首頁
        this.$router.push({
          path: '/'
        })
      }
    }
  }
}
</script>

Vue2.0如何在HTML中添加路由跳轉(zhuǎn)
<router-link to="/login">用戶登錄</router-link>