微人事-左侧导航栏制作

初始状态

                <el-aside width="200px">
                    <el-menu
                    // 默认打开的菜单项
                            default-active="2"
                            class="el-menu-vertical-demo"
                            // 菜单打开的回调
                            @open="handleOpen"
                            // 菜单关闭的回调
                            @close="handleClose">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            // 点击的时候要有对应的页面显示
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                                <el-menu-item index="1-4-2">选项2</el-menu-item>
                                <el-menu-item index="1-4-3">选项3</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>

修改后

            <el-container>
                <el-aside width="200px">
                    <el-menu @select="menuClick">
                    // 这里将路由看作数据源，将使用v-if排除有hidden标记的数据,使用路由的name是属性来动态显示左侧栏目。
                        <el-submenu index="1" v-for="(item, index) in this.$router.options.routes" :key="index" v-if="!item.hidden">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{item.name}}</span>
                            </template>
                            // 动态显示当前栏目的子栏目内容
                                <el-menu-item :index="child.path" v-for="(child, indexj) in item.children" :key="indexj">{{child.name}}</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main><router-view/></el-main>
            </el-container>

上述代码使用的menuClick来进行画面的切换 也可以直接使用router属性来进行切换

        methods:{
            menuClick(indexPath){
                this.$router.push(indexPath);
            },

路由内容显示

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login,
    hidden:true
  },
    {
      path: '/home',
      name: 'Home',
      component: Home,
      hidden:true
    },
    {
      path: '/home',
      name: '导航一',
      component: Home,
      children:[
        {
          path: '/Test1',
          name: '选项1',
          component: Test1
        },
        {
          path: '/Test2',
          name: '选项2',
          component: Test2
        }
      ]
    }
]

const router = new VueRouter({
  routes
})

export default router