vue ajax登入,vue+vuex+axios 实现简单登录

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