vue 右边跳转 实现左侧栏_vue+element 实现后台管理系统（登录+侧边菜单栏）

公司最近项目是后台管理系统，由我负责，网上找模板发现还需要改很多地方，而且那些模板也没有写代码的实现思路，对于vue项目经验不足者很难看懂，所以就按照自己的思路从零实现一遍，过程讲解还是比较详细的，若是有不足之处还请指正。

整体布局：

登录：

菜单：

准备工作：

1、安装elementui

npm i element-ui -S

import ElementUIfrom 'element-ui'import'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)

2、配置路由

index.js:

import Vue from 'vue'import VueRouter from'vue-router'const Home= () => import('../views/home/Home.vue')

const Login= () => import('../views/login/Login.vue')

Vue.use(VueRouter)

const routes=[

{

path:'/',

name:'Login',

component: Login

},

{

path:'/home',

name:'Home',

component: Home

},

]

const router= newVueRouter({

mode:'history',

base: process.env.BASE_URL,

routes

})

exportdefault router

3.开始写组件

一、登录login

>

用户登录

登录

name:"Login",

data() {return{

formdata: {

username:"",

password:"",

},

};

},

};

使用el-form表单进行布局，label-position="top"表示表单域标签的位置是上下对齐，:model="formdata"表示我们要绑定的数据

看渲染效果

调整样式：

.login-wrap{height:100%;background:#324152;display:flex;justify-content:center;align-items:center;

}.login-form{width:400px;background:#fff;border-radius:5px;padding:30px;

}.login-btn{width:100%;

}

样式调整好之后开始用aioxs发送登录请求

安装axios，

npm i axios -s

在main.js中引入

import axios from 'axios'

Vue.prototype.$http = axios

在别的组件中通过this.$http.post(get)发送请求

login.vue中使用：

methods:{

handleLodin(){//测试版本

//if(this.formdata.username !== '' && this.formdata.password !== ''){

//this.$router.push({path:'/home'})

2.提示成功

//this.$message({

//showClose: true,

//message: '登录成功',

//type: 'success'

//});

//}else {

//this.$message({

//showClose: true,

//message: '用户名和密码不能为空',

//type: 'error'

//});

//}

//正式版本需要发送请求

//url是要发送请求的地址

this.$http.post('url',this.formdata).then(res =>{//请求返回来的数据

console.log(res)//保存token：

localStorage.setItem('token',res.data.token)//登录成功

if(res.data.status === 200){//1.跳转home页面

this.$router.push({path:'/home'})//2.提示成功

this.$message({

showClose:true,

message:'登录成功',

type:'success'});

}else { //登录失败

this.$message({

showClose:true,

message:'用户名或密码错误',

type:'error'});

}

})

}

}

当点击登录按钮的时候会触发handleclick事件，然后发送axios请求，如果登录成功就跳转到下一个页面，显示登录成功的提示消息，如果失败就抛出错误提示消息。这里我写了两个版本，一个是正式发送请求，一个是测试版本，在没有后端接口的时候可以通过这个测试版本测试抛出的登录成功和失败消息提示。

对于灯枯成功和失败的条件可以根据实际项目情况进行修改。

二、菜单menu

首先：布局分为三部分，头部header，侧边栏aside，右边主体，用elementui布局如下

Header

Aside

Main

name:'Home'};

接下来我们给页面加样式：

header

aside

Main

name:"Home"};

.container{height:100vh;font-size:15px;

}.header{background:#212121;color:#fff;

}.aside{background:#3a3a3a;color:#fff;

/*height: 100%;*/

}.main{

/*height: 100%;*/color:#212121;

}

看看效果：

接着头部样式布局：通过24分栏进行布局。

将头部分为两部分，左边占16栏，右边占8栏el-row表示一行，el-col表示列

/>