在vue.js+webpack環(huán)境搭建中我們已經(jīng)創(chuàng)建了一個(gè)項(xiàng)目忌愚，基于創(chuàng)建的項(xiàng)目曲管，我們來增加一個(gè)路由用于用戶登錄。
修改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)建一個(gè)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 {
// 對(duì)應(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>
