在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>
