vue基于element-ui制作的成绩管理系统（三）主界面 登录后跳转的页面

1.在views文件夹下新建home.vue 

介绍下首页应该包含头部。左边菜单导航栏。右面实时加载的内容，整个部分划分为三块。

页面布局如下

<template>
  <el-row style="height:100%">
    <v-header></v-header>   //头部组件
    <el-row>
      <el-col class="leftmenu" :span="3">
        <el-menu :default-active="$route.path" light router v-if="showTeacher">   //教师身份菜单
          <template v-for="(item,index) in menuitem">         //循环菜单
            <el-menu-item :index="item.path" @click="dolist(item.path)"  v-if="!item.hidden">
              <i class="fa" :class="item.class"></i>          //绑定类
              {{item.name}}
            </el-menu-item>
          </template>
        </el-menu>
        <el-menu :default-active="$route.path" light router v-if="showStudent">   //学生身份菜单
          <template v-for="(item,index) in menuitems">
            <el-menu-item :index="item.path" @click="dolist(item.path)"  v-if="!item.hidden">
              <i class="fa" :class="item.class"></i>
              {{item.name}}
            </el-menu-item>
          </template>
        </el-menu>

        <el-menu :default-active="$route.path" light router v-if="showManager">   //管理员身份菜单
          <template v-for="(item,index) in menuitemM">
            <el-menu-item :index="item.path" @click="dolist(item.path)"  v-if="!item.hidden">
              <i class="fa" :class="item.class"></i>
              {{item.name}}
            </el-menu-item>
          </template>
        </el-menu>
      </el-col>
      <el-col class="contentRight" :span="21" :offset="3">
        <router-view></router-view>        //右面内容区
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
  import Header from '../views/header/header.vue'  //头部组件引入
  export default {
    name: "home",
    data(){
      return{
        showTeacher:false, //初始值都不显示
        showStudent:false,
        showManager:false,
        menuitem:[
          {path:'/person-msg',name:'个人信息',class: 'fa-line-chart'},
          {path:'/grade-manage',name:'成绩管理', class: 'fa-newspaper-o'},
          {path:'/grade-query',name:'成绩查询', class: 'fa-line-chart'},
          {path:'/grade-write',name:'成绩录入', class: 'fa-newspaper-o'},
          {path:'/system-settings',name:'修改密码', class: 'fa-line-chart'},
        ],
        menuitems:[
          {path:'/person-msg',name:'个人信息',class: 'fa-line-chart'},
          {path:'/grade-query',name:'成绩查询', class: 'fa-line-chart'},
          {path:'/system-settings',name:'修改密码', class: 'fa-line-chart'},
        ],
        menuitemM:[
          {path:'/person-msg',name:'个人信息',class: 'fa-line-chart'},
          {path:'/student-manage',name:'学生管理',class: 'fa-table'},
          {path:'/teacher-manage',name:'教师管理',class: 'fa-newspaper-o'},
          {path:'/course-manage',name:'课程管理', class: 'fa-plug'},
          {path:'/system-settings',name:'修改密码', class: 'fa-line-chart'},
        ],
      }
    },
    components: {
      'v-header': Header //头部组件引入
    },
    mounted(){
      let role = sessionStorage.getItem('userrole');  //根据存储下来的信息，得到当前的角色名
　　　　//通过角色名判断
      if(role=='教师'){
        this.showTeacher = true;  //角色名是教师，教师菜单显示
      }else if(role=='管理员'){
        this.showManager = true;  //角色名是管理员，管理员菜单显示
      }else{
        this.showStudent = true;  //角色名时学生，学生菜单显示 
      }
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL);     //这里是设置点击浏览器后退按钮不会返回到登录页，为了防止用户点击在首页时点击浏览器后退按钮返回到登录页，
      });
    },
    methods:{
      dolist(e){
        this.$router.push({path:e})    //点击菜单跳转到对应页面，浏览器地址也跳转到指定URL
      }
    }
  }
</script>

附：路由js(index.js)

 

附页面效果图：

 

　　　　　　　　　　　　　　　　　　　　　　　　　　付出不一定有回报，但不付出一定没有回报

转载于:https://www.cnblogs.com/ycc-521/p/9597460.html