导文

vue2实现后台管理系统的侧边栏切换子页面

文章重点

路由写法

const router = new Router({
   
    routes: [{
   
            path: '/',
            redirect: "Home"
        },
        {
   
            path: '/Home',
            component: Home,
            redirect: '/deviceList',//第一次出现展示的子页面
            children: [{
   //子页面
                    path: '/deviceList',
                    component: deviceList,
                },
            ]
        },
        {
   
            path: '/login',
            component: login
        },

    ]
})

侧边栏

elementui代码

 <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#338acf"
      text-color="#fff"
      active-text-color="#fff"
      unique-opened
      router
    >
      <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
        <template slot="title">
          <iconSvg :iconname="item.iconName" class="headerIcon" />
          <span>{
   {
    item.autName }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            :index="'/' + subItem.path"
            v-for="subItem in item.children"
            :key="subItem.id"
            :disabled="subItem.disableds"
          >
            <div
              :style="{
                backgroundColor:
                  '/' + subItem.path == activeIndex
                    ? 'rgba(7, 167, 235, 1)'
                    : '',
              }"
              class="submenuItem"
            >
              <iconSvg :iconname="subItem.iconName" class="headerIcon" />
              <span>{
   {
    subItem.autName }}</span>
            </div>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>

data值

   menulist: [
        {
   
          id: 1,
          autName: "设备管理",
          iconName: "icon-shebeiguanli",
          children: [
            {
   
              id: "1 - 1",
              autName: "设备列表",
              iconName: "icon-liebiao",
              path: "deviceList",
            },
          ],
        },

        },

监听页面当前路由值

      this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单