Activeindex selection and redirection in the menu bar on the right of easycvs

Last time we solved EasyCVS Video management platform in small screen state menu bar problem （ Video management platform menu bar small screen adaptive optimization recording ）. But in practice ,EasyCVS When the right menu bar switches to the top menu bar , Menu bar activeindex Will change , here , If you open the right menu bar , Correspondingly, you also need to switch to the corresponding menu bar item, At the same time, when the page is refreshed, it also needs to be redirected to the corresponding activeIndex.

First of all, the menu bar on the right is to use elementUi Of el-menu Components , The component comes with it default-active attribute , When the top navigation bar switches, his activeIndex Value to the navigation bar on the right default-active value .

Redirection is to detect the routing address , To get pre-determined information for each navigation bar item The corresponding routing address , And then we put each route's activeInde The value given to the navigation bar default-active Assignment can .

The reference codes are as follows ：

        <el-menu
          :default-active="activeIndexRight"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @select="select"
          background-color="#292C33"
          text-color="#fff"
          @close="handleClose"
          :router="true"
        >
          <el-menu-item index="0" :route="'/scrren'">
            <span slot="title"> Real-time Preview </span>
          </el-menu-item>
          <el-menu-item index="1" :route="'/live/lis'">
            <span slot="title"> Live video </span>
          </el-menu-item>
          <el-menu-item index="2" :route="'/user/list'">
            <span slot="title"> User management </span>
          </el-menu-item>
          <el-menu-item index="3" :route="'/space/list'">
            <span slot="title"> Space management </span>
          </el-menu-item>
          <el-menu-item index="4" :route="'/bucket/list'">
            <span slot="title"> Object storage </span>
          </el-menu-item>
        </el-menu>

    // Navigation bar redirection 
    RouteRedirection() {
      var path = this.$route.path;
      let paths = [
        { path: "/scrren", type: 0 },
        { path: "/live/list", type: 1 },
        { path: "/user", type: 2 },
        { path: "/space", type: 3 },
        { path: "/bucket", type: 4 },
        { path: "/oss/list", type: 5 },
      ];
      for (const i in paths) {
        if (path.indexOf(paths[i].path) != -1) {
          this.activeIndex = paths[i].type;
          this.activeIndexRight = JSON.stringify(this.activeIndex);
          console.log(this.activeIndex, " route ");
          return;
        }
      }
    },

EasyCVS Although it is not open to the outside world at present , But interested users can learn about EasyCVR.EasyCVR Currently supported RTSP、GB28181、Ehome、 The sea, SDK、 Dahua SDK Access of protocol equipment , Private agreements of other mainstream manufacturers are expanding . So in the long run ,EasyCVR It has high use value and adaptability .