1.创建vue项目
2.创建登录页
在views下创建一个login.vue文件 -文件内容一个简单登录页
登录
import { mapActions } from 'vuex'
export default {
data(){
return{
data:{
username:'123456',
password:'123456',
}
}
},
methods:{
...mapActions([
'handleLogin',
'getUserInfo'
]),
login(){
this.handleLogin(this.data).then(res => {
this.getUserInfo().then(res => {
this.$router.push({ name: 'Home'})
})
}).catch(error => {
console.log(2222)
})
}
}
}
button{
margin-top: 50px;
width: 300px;
height: 50px;
}
input{
margin-top: 30px;
border: red 1px solid;
width: 500px;
height: 50px;
text-align: center;
}
3配置路由---新添加一个路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue')
},
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting