Main组件整理ui搭建和NavMenu 导航菜单

一、Main组件（都可在element官网搜索到相应组件）

在src文件夹下的Main.vue中

<template>//组件
<el-container style="height:100%"> 
<el-aside width="auto">Aside</el-aside>
<el-container> 
<el-header>Header</el-header> 
<el-main>Main</el-main>
</el-container>
</el-container>
</template>

<script>

export default {
  name: 'Main',
  components: {
  
  }
}
</script>

<style lang="scss" scoped>
.el-header{
  background: #333;
}
.el-main{
  padding-top: 0;
}
</style>

在router文件夹下index.js中

import Main from '../views/Main.vue'

const routes = [
  {
    path: '/',
    name: 'Main',
    component: Main,
    children:[
      {
        path:'/',
        name:'home',
        component:()=>import('@/views/Home/Home')
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在main.js中，引入组件

import { Button, Select,Container,Aside, Header,Main
  } from 'element-ui';
  
Vue.use(Container);
Vue.use(Aside);
Vue.use(Header);
Vue.use(Main);

在src文件夹下APP.vue

<template>
  <div id="app">   
     <router-view />
  </div>
</template>

二、NavMenu 导航菜单

在components文件夹下新建CommonAside.vue中 :collapse="isCollapse"是否折叠

computed计算属性

v-for="item in noChildren"循环遍历

:class="'el-icon-'+item.icon"拼接icon显示图标

{{item.label}}显示数据

background-color="#545c64" menu颜色

active-text-color="#ffd04b"选中时颜色

@click="clickMenu(item)"点击时触发方法实现跳转

这是方法，路由跳转

clickMenu(item){
          this.$router.push({name:item.name})
      }

新建CommonAside.vue中写入以下代码

<template>
    <el-menu  class="el-menu-vertical-demo" 
    :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
  <h3 v-show="!isCollapse">后台管理系统</h3>
  <h3 v-show="isCollapse">后台</h3>
  <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
   
    <i :class="'el-icon-'+item.icon"></i>
    <span slot="title">{{item.label}}</span>
  </el-menu-item>
  <el-submenu :index="item.label" v-for="item in hasChildren" :key="item.path">
    <template slot="title">
      <i :class="'el-icon-'+item.icon"></i>
      <span slot="title">{{item.label}}</span>
    </template>
    <el-menu-item-group>     
      <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" 
      :key="subIndex" @click="clickMenu(item)">
      <i :class="'el-icon-'+subItem.icon"></i>
      <span slot="title">{{subItem.label}}</span>
         </el-menu-item>     
    </el-menu-item-group>       
  </el-submenu>
</el-menu>
</template>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px; 
min-height: 400px; 
}
</style>

<script>
export default { 
  data() { 
      return { 
       isCollapse: false ,
          menu:[
        {
          path: "/",
          name: "home",
          label: "首页",
          icon: "s-home",
          url: "Home/Home",
        },
        {
          // path: "/mall",
          name: "mall",
          label: "商品管理",
          icon: "video-play",
          url: "MallManage/MallManage",
        },
        {
          path: "/user",
          name: "user",
          label: "用户管理",
          icon: "user",
          url: "UserManage/UserManage",
        },
        {
          label: "其他",
          icon: "location",
          path: "/other",
          children: [
            {
              path: "/page1",
              name: "page1",
              label: "页面1",
              icon: "setting",
              url: "Other/PageOne",
            },
            {
              path: "/page2",
              name: "page2",
              label: "页面2",
              icon: "setting",
              url: "Other/PageTwo",
            },
          ],
        },
      ],
}; 
},
methods: {
  clickMenu(item){
          this.$router.push({name:item.name})
      }
},
  computed:{
        noChildren(){  
            return this.menu.filter((item)=>!item.children);
        },
        hasChildren(){
            return this.menu.filter((item)=>item.children);            
        },
        isCollapse(){
          return this.$store.state.tab.isCollapse
        }
    }
} </script>

在views文件夹下的Main.vue中引入<common-aside></common-aside>

<template>
  <el-container style="height:100%">
  <el-aside width="auto"><common-aside></common-aside></el-aside>
  <el-container>
    <el-header><common-header></common-header></el-header>
    <el-main> <router-view /> </el-main>
  </el-container>
</el-container>
</template>

//引入
import CommonAside from '../components/CommonAside.vue'


export default {
  name: 'Main',
  components: {    
    CommonAside, 
  }
}
</script>

在main.js中引入样式

import { Button, Select,Container,Aside, Header,Main,
  Menu,MenuItem,MenuItemGroup,Submenu} from 'element-ui';
  
Vue.use(Menu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Submenu);

在node终端输入

npm run serve

即可查看效果，例