vue高级菜单布局

main.js

import Vue from 'vue'
// 引入app.vue页面
import App from './App.vue'
// 引入路由(当前包)
import router from './router'
// 引入plugins包下elementui  可直接使用  若想使用某些东西需要在main.js中引入
import './plugins/element.js'

import axios from "axios";

Vue.config.productionTip = false

//设置axios得请求拦截器----在请求头部上添加token
axios.interceptors.request.use(config=>{
  //从sessionStorage获取token值
  var token = sessionStorage.getItem("token");
  if(token){//token不为空则为真
    //请求头中会携带token
    config.headers.token=token;
  }
  return config;
})

//to 要跳转的路径   from来自哪里   next放行
router.beforeEach((to,from,next)=>{
  //获取跳转路径
  var path = to.path;
  //判断是否为跳转路径
  if(path==="/login"){
    return next();
  }
  //判断是否登录过
  var token = sessionStorage.getItem("token");
  if (token){
    return  next();
  }
  //跳转到登录
  return next("/login");
})
//设置axios基础路径
axios.defaults.baseURL="http://localhost:8808"

//把axios挂载到vue对象中,以后在vue中如果使用axios直接可以用$http名称
Vue.prototype.axios=axios

new Vue({
  router,
  // 渲染App的网页 并把vue对象挂载到app上  可以在app.vue可以使用vue标签
  render: h => h(App)

}).$mount('#app')

App.vue

<template>
  <div id="app">


    <!--渲染组件   渲染到这里-->
    <!--路由视图  点击首页 通过路径渲染到这里-->
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'app'

}
</script>

<style>

</style>

login.vue

<template>
    <!--这里必须使用一个双标签-->

    <div id="login_box">
        <div class="img_position">
            <el-avatar :size="140" :src="imgUrl"></el-avatar>
        </div>
        <el-card class="box-card">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="name">
                    <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               size="mini"
                               :plain="true"
                               @click="login()"
                               style="margin-left: 100px;width: 100px"
                            >登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return {
                ruleForm: {
                    name: '',
                    password: ''
                },
                rules: {
                    name: [
                        {required: true, message:'用户名不能为空', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'},
                    ]
                },
                imgUrl:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            }
        },
        methods:{
            login(){
                //表单校验
                this.$refs['ruleForm'].validate((valid)=>{
                    if(valid){
                        //后台接口路径
                        this.axios.post("http://localhost:8808/system/login",this.ruleForm).then(result=>{
                            if(result.data.code===2000){
                                //获取token
                                var token = result.data.data;
                                //token 保存在sessionStorage中
                                sessionStorage.setItem("token",token);
                                //路由跳转
                                this.$router.push("/home")
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style>
    #login_box{
        position: relative;
        width: 500px;
        margin: 250px auto;
    }
    #login_box div.img_position{
        position: absolute;
        left: 200px;
        top: -70px;
    }
    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        padding: 100px 50px 0 0;
        width: 480px;
    }

</style>

home.vue

<template>
    <el-container>
        <el-header>
                <span id="logo" style="display: inline-block;width: 50%;height: 100%;float: left" >
                     <a href=" ">< img src="../assets/logo.png" height="100%" width="180px"></a>
            </span>
            <span id="avatar" style="float: right">
                <el-dropdown @command="handleCommand"><!--此处是下拉框的点击事件-->
                  <span class="el-dropdown-link" style="margin-top: 10px; display: inline-block;">
                    <el-avatar ></el-avatar>
                  </span>
                    <el-dropdown-menu slot="dropdown" style="margin-top: -10px">
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                </span>
        </el-header>
        <!--左侧菜单-->
        <el-container height="600px">
            <el-aside width="200px">

                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        background-color="#C0C4CC"
                        :router="true"
                        unique-opened="unique-opened"
                        text-color="#000"
                        active-text-color="#ffd04b">
                    <!--使用组件-->
                    <LeftMenu :menu-data="leftMenus"></LeftMenu>
                </el-menu>
            </el-aside>
            <el-main>
                <!--试图渲染-->
                <router-view/>
            </el-main>
        </el-container>
        <el-footer>Footer</el-footer>
    </el-container>
</template>

<script>
    import LeftMenu from "@/components/LeftMenu";
    export default {
        name: "Home",
        components:{
          LeftMenu
        },
        data(){
            return{
                leftMenus:[],
            }
        },
        created() {
            this.init();
        },
        methods:{
            init(){
                this.axios.get("/system/permission/leftMenu").then(result=>{
                    if(result.data.code===2000){}
                   this.leftMenus=result.data.data;
                })
            },
            getInfo(){
                this.axios.get("/system/user/getInfo").then(result=>{
                    console.log(result)
                })
            },
            handleCommand(command){
                if(command==='logout'){
                    this.axios.get("/system/logout").then(result=>{
                        if(result.data.code===2000){}
                        sessionStorage.removeItem("token");
                        this.$router.push("/login")
                    })

                }
            }
        }
    }
</script>
<!--当前vue有效-->
<style>
    html,body,#app{
        height: 100%;
    }
    body,#app{
        padding: 0px;
        margin:0px;
    }
    .el-container{
        height: 100%;
    }
    .el-header, .el-footer {
        background-color: #1F272F;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        background-color: #545c64;
        color: #333;
        line-height: 560px;
    }
    .el-aside>.el-menu{
        border: none;
    }
    .el-main {
        background-color: #E9EEF3;
        color: #333;

    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>>

list.vue

<template>
    <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="角色名称