如何使用EasyCVS右側(cè)菜單欄的activeindex選定以及重定向

本篇內(nèi)容介紹了“如何使用EasyCVS右側(cè)菜單欄的activeindex選定以及重定向”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

在實際使用中，EasyCVS右側(cè)菜單欄在頂部菜單欄切換時，菜單欄的activeindex就會改變，此時，若是打開右側(cè)菜單欄，相應(yīng)的也是需要切換到相應(yīng)菜單欄item，同時在頁面刷新時也需要重定向到相應(yīng)的activeIndex。

首先右側(cè)菜單欄是使用elementUi的el-menu組件，該組件自帶default-active 屬性，當頂部導(dǎo)航欄切換時將他的activeIndex值給右側(cè)的導(dǎo)航欄default-active 值即可。

而重定向是檢測路由地址，來獲取事先確定好的每個導(dǎo)航欄的item對應(yīng)的路由地址，然后將每個路由的activeInde值給導(dǎo)航欄的default-active賦值即可。

參考代碼如下：

        <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">實時預(yù)覽</span>          </el-menu-item>          <el-menu-item index="1" :route="'/live/lis'">            <span slot="title">視頻直播</span>          </el-menu-item>          <el-menu-item index="2" :route="'/user/list'">            <span slot="title">用戶管理</span>          </el-menu-item>          <el-menu-item index="3" :route="'/space/list'">            <span slot="title">空間管理</span>          </el-menu-item>          <el-menu-item index="4" :route="'/bucket/list'">            <span slot="title">對象存儲</span>          </el-menu-item>        </el-menu>

    //導(dǎo)航欄重定向    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, "路由");
          return;
        }
      }
    },

EasyCVS目前雖不對外開放，但有興趣的用戶可以先了解EasyCVR。EasyCVR目前已經(jīng)支持RTSP、GB28181、Ehome、?？礢DK、大華SDK等協(xié)議設(shè)備的接入，其他主流廠家的私有協(xié)議在不斷擴展中。因此從長遠來看，EasyCVR具備很高的使用價值和適配性。

“如何使用EasyCVS右側(cè)菜單欄的activeindex選定以及重定向”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！