vue学习笔记1 - 实现一个简单的用户登录

在vue.js+webpack环境搭建中我们已经创建了一个项目，基于创建的项目，我们来增加一个路由用于用户登录。

修改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
    }
  ]
})

然后我们来创建一个Login组件，在components中创建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 {
  // 对应class名字
  name: 'login',
  // 数据部分
  data () {
    return {
      msg: '',
      username: 'delicacylee',
      password: 'delicacylee'
    }
  },
  // 事件部分
  methods: {
    login (form) {
      if (form.username !== 'delicacylee' || form.password !== 'password') {
        this.msg = '您的用户名和密码不正确'
      } else {
        // 跳转到首页
        this.$router.push({
          path: '/'
        })
      }
    }
  }
}
</script>

Vue2.0如何在HTML中添加路由跳转
<router-link to="/login">用户登录</router-link>