ElementUI导航菜单使用(并解决刷新会调回首页)

新桥

  <el-menu 
  :default-active="$route.path" //刷新绑定当前页面路径不会跳转
   router //是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
   @select="handleSelect"  //菜单激活回调
    unique-opened  //是否只保持一个子菜单的展开
    >
          <el-menu-item
            index="/hospital/pcportal"
            style="text-align:left;padding-left:30px;font-weight: bold;color:#000000"
          >首页</el-menu-item>
          <template v-for="(item) of navData">
            <bexmenuitems
              :model="item"
              :key="(item.id + '_k')"
              v-if="(item.children != null && item.children.length > 0)"
            ></bexmenuitems>
            <el-menu-item
              :index="item.url"
              :key="item.id"
              style="font-size:12px;text-align:left;padding-left:60px"
              v-else
            >{{item.name}}</el-menu-item>
          </template>
        </el-menu>

methods

  handleSelect(key, keyPath) {
      let _this = this;
      let serverip = util.getServerIP();
    },

后台管理项目：

   <!-- 左侧导航 -->
    <el-menu
      background-color="#304156"
      text-color="#fff"
      unique-opened
      :default-active="activePath"
      router
    >
      <template v-for="item in accessMenu">
        <!-- 没有儿子的 -->
        <el-menu-item v-if="!item.children" :index="item.path" :key="item.title">
          <i class="iconfont" :class="item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>

        <!-- 有儿子的 -->
        <el-submenu v-else :index="item.index" :key="item.title">
          <template slot="title">
            <i class="iconfont" :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item
            v-for="child in item.children"
            :key="child.title"
            :index="child.path"
          >{{ child.title }}</el-menu-item>
        </el-submenu>
      </template>
    </el-menu>

data:

  accessMenu: []

created()

 created() {
    // 从本地取出role
    let role = local.get("u_r");
    // 计算出权限菜单（可以访问的菜单）
    this.accessMenu = this.menus.filter(menu => menu.meta.includes(role));
  },

computed：

 computed: {
    // 计算高亮效果
    activePath() {
      // 如果跳转到了商品的编辑页面 这个高亮的地址 还是返回 goodslist 也就是让商品列表保持激活
      if (this.$route.path === "/index/goodsedit") {
        return "/index/goodslist";
      }

      if (this.$route.path === "/index/orderdetail") {
        return "/index/order";
      }

      return this.$route.path;
    }
  }