【vue】el-menu菜单切换页面示例

1.示例图片

2.代码结构

3.main.js

主要代码为import router from ‘./router’，并且在new Vue中加入router

import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.config.productionTip = false
Vue.use(Element)
Vue.use(axios)
Vue.prototype.$axios = axios

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4.router/index.js

import Vue from 'vue'
import Router from 'vue-router'
//主页面
import mainPage from '@/components/views/main/mainPage'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'mainPage',
      component: mainPage,
      children: [
        {
          path: '/system/role',
          component: () => import('../components/views/system/role.vue'),
          name: '角色管理',
        },
        {
          path: '/system/authority',
          component: () => import('../components/views/system/authority.vue'),
          name: '权限管理'
        },
        {
          path: '/system/user',
          component: () => import('../components/views/system/user.vue'),
          name: '用户管理'
        }
      ]
    }
  ]
})

5.mainPage.vue

<template>
  <el-container style="height:calc(100%);">
    <el-aside width="200px;height:calc(100%)" class="aside">
      <mainLeft style="width:200px;hegith:100%;"></mainLeft>
    </el-aside>
    <el-main><router-view></router-view></el-main>
  </el-container>
</template>
<script>
import mainLeft from '@/components/views/main/mainLeft'

export default {
  name: "mainPage",
  components:{mainLeft},
  data() {
    return {
      screenWidth: document.documentElement.clientWidth,     // 屏幕宽
      screeHeight: document.documentElement.clientHeight,    // 屏幕高
      topHeight: document.documentElement.clientHeight*0.3,

    };
  },
  methods: {
    getHeight(){
      console.log(document.body.clientHeight);
      return document.body.clientHeight;
    },
    
  }
};
</script>

<style lang="scss" scoped>
  .el-header{
    padding:0px;
  }
  .aside{

  }
</style>

6.mainLeft.vue

<template>
  <div>
    <el-menu
      :default-active="this.$router.path"
      text-color="#409eff"
      class="el-menu-vertical-demo"
      unique-opened 
      router
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span slot="title">系统设置</span>
        </template>
        <el-menu-item index="/system/role">
          <i class="el-icon-user"></i>
          <span slot="title">角色管理</span>
        </el-menu-item>
        <el-menu-item index="/system/authority">
          <i class="el-icon-key"></i>
          <span slot="title">权限管理</span>
        </el-menu-item>
        <el-menu-item index="/system/user">
          <i class="el-icon-user-solid"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "mainLeft",

  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    handleOpen() {
      
    }
  },
};
</script>
<style lang="scss" scoped>
.el-menu-item {
  color: #409eff;
}
/deep/ .el-submenu__title {
  color: #409eff;
}
.el-submenu{
  background: #f4f4f5;
}
.el-menu-item{
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
/deep/ .el-submenu__title{
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

</style>

7.authority.vue

<template>
  <div class="app-container pull-height">
    <basic-container>
      权限管理
    </basic-container>
  </div>
</template>
<script>

export default {
  name: "authority",
  data() {
    return {
    } 
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
</style>

8.role.vue

<template>
  <div class="app-container pull-height">
    <basic-container>
      角色管理
    </basic-container>
  </div>
</template>
<script>

export default {
  name: "role",
  data() {
    return {
    } 
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
</style>

9.user.vue

<template>
  <div class="app-container pull-height">
    <basic-container>
      用户管理
    </basic-container>
  </div>
</template>
<script>

export default {
  name: "user",
  data() {
    return {
    } 
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>

</style>