elementui导航栏的使用和选中状态保持,以及重复点击报错

话不多说,直接开干

首先是引入elementui,根据项目需求,可以全局和局部引入,引入方法就不说了,看官网elementui官网

下面是代码格式:
<el-menu
          v-if="JSON.stringify(menu) != '[]'"
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          active-text-color="#bf001e"
          background-color="#1F1F1F"
          text-color="white"
          :unique-opened="true"
          router
        >
       
          <el-submenu :index="item.code" v-for="(item, j) in menu" :key="item.id" v-show="j > 1">
            <template slot="title">
              <i class="iconfont iconhome" style="color:#bf001e;font-size:20px;margin-left:-40px" v-if="j === 0"></i>
              <i class="iconfont iconmonitoringcenter" style="color:#bf001e;font-size:20px" v-if="j === 1"></i>
              <i class="iconfont iconenterpriseinformation" style="color:#bf001e;font-size:20px" v-if="j === 2"></i>
              <i class="iconfont iconpassword" style="color:#bf001e;font-size:20px" v-if="j === 3"></i>
              <img src="../assets/images/monitor.png" alt style="width:25px" v-if="j === 4" />
              <i class="iconfont iconrightsmanagement" style="color:#bf001e;font-size:20px" v-if="j === 5"></i>
              <img src="../assets/images/formIcon.png" alt style="width:19px" v-if="j === 6" />
              <span style="font-size:18px;margin-left:10px" v-text="item.name"></span>
            </template>
            <div v-if="JSON.stringify(item.menuList) != '[]'">
              <el-menu-item v-for="(menuItem,i) in item.menuList" :key="i" :index="'/' + menuItem.code" @click="saveNavStatus(menuItem.code)">{{menuItem.name}}</el-menu-item>
            </div>
          </el-submenu>
        </el-menu>

上面是动态路由,路由权限页面是根据后台返回的。

:default-active="$route.path" // 保持当前页面选中状态

elementui vue-router 重复点击报错

方法:
  1. 更新vue-router版本至3.0及以上 npm i [email protected]
  2. 卸载node_modules,重新安装npm install
  3. main.jsrouter/index.js添加以下代码
import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

你可能感兴趣的:(javascript,vue,elementUi)