侧边栏菜单部分的渲染问题

侧边栏菜单部分的渲染问题

html部分

		<el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          :default-active="activePath"
          router
        >
          <!-- 侧边栏菜单部分 -->
          <el-menu-item
            v-for="item in menuList"
            :key="item.id"
            :index="'/' + item.path"
            @click="saveNavState('/' + item.path)"
          >
            <!-- <i class="icon" :class="iconsObj[item.id]"></i> -->
            <el-image
              class="IconImg"
              :src="iconImg[item.id]"
              fit="fit"></el-image>
            <span slot="title" style="margin-left: 8px;">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>

data部分

menuList: [
        // {
        //   // 路由地址
        //   path: 'index',
        //   // 菜单名称
        //   name: '首页',
        //   // 图标id
        //   id: '0',
        // },
        // {
        //   // 路由地址
        //   path: 'result',
        //   // 菜单名称
        //   name: '成果管理',
        //   // 图标id
        //   id: '1',
        // },
        // {
        //   // 路由地址
        //   path: 'files',
        //   // 菜单名称
        //   name: '文件管理',
        //   // 图标id
        //   id: '2',
        // },
        {
          // 路由地址
          path: 'userManagement',
          // 菜单名称
          name: '用户管理',
          // 图标id
          id: '3',
        },
        {
          // 路由地址
          path: 'departMentManagement',
          // 菜单名称
          name: '部门管理',
          // 图标id
          id: '4',
        },
        {
          // 路由地址
          path: 'roles',
          // 菜单名称
          name: '角色管理',
          // 图标id
          id: '5',
        },
        {
          // 路由地址
          path: 'systemDeploy',
          // 菜单名称
          name: '系统配置',
          // 图标id
          id: '6',
        },
      ],
      // 字体图标 自定义图标
      // iconsObj: {
      //   0: 'iconfont icon-shouye',
      //   1: 'iconfont icon-chengguozhanshi',
      //   2: 'iconfont icon-caozuojiemiantubiao---_wenjian',
      //   3: 'el-icon-user',
      //   4: 'iconfont icon-jiaoseguanli',
      //   5: 'el-icon-s-custom',
      //   6: 'el-icon-s-custom',
      // },
      //图片
      iconImg:{
        3: require('../assets/images/iconImg/user1.png'),
        4: require('../assets/images/iconImg/department1.png'),
        5: require('../assets/images/iconImg/roles1.png'),
        6: require('../assets/images/iconImg/system1.png'),
      }

js部分

// 保存链接的激活状态
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    },