vue导航菜单切换

结合elementUI

方案一：用ele的router

html：

<el-menu
    :default-active="this.$route.path" 
    unique-opened
    router
    class="nav"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
  <template v-for="(item,index) in list">
    <el-submenu :index="item.title" v-if="item.child" :key="index">
      <template slot="title">
        <i :class="'iconfont icon-'+item.title"></i>
        <span>{{item.name}}</span>
      </template>
      <el-menu-item :index="'/'+item.title+'/'+items.title" v-for="(items,index) in item.child" :key="index">{{items.name}}</el-menu-item>
    </el-submenu>
    <el-menu-item :index="item.title" v-else :key="index">
      <i :class="'iconfont icon-'+item.title"></i>
      <span slot="title">{{item.name}}</span>
    </el-menu-item>
  </template>
  </el-menu>

js：

export default {
  name: "navigator",
  data() {
    return {
      list: [
        {
            "name": "首页",
            "title": "home",
        },
        {
            "name": "故障",
            "title": "trouble",
            "child": [
              {
                "title": 'checkTrouble',
                "name": '检测',
              },
              {
                "name": '故障关联图片',
                "title": 'rePicTrouble',
              }
            ]
        },
        {
          "name": "参数设置",
          "title": "setPara",
          "child": [
            {
              "name": '参数设置和查询',
              "title": 'setParaSelect',
            }
          ]
        },
        {
          "name": "日志",
          "title": "dailyLog",
          "child": [
            {
              "name": '启动日志',
              "title": 'dailyLogStart',
            },
            {
              "name": '故障日志',
              "title": 'dailyLogTrouble',
            }
          ]
        },
        {
          "name": "权限",
          "title": "permission",
          "child": [
            {
              "name": '个人信息',
              "title": 'personalPermission',
            },
            {
              "name": '员工列表',
              "title": 'permissionList',
            }
          ]
        }
      ]
    };
  },
};

方案二：不用ele的router

html：

<el-menu
    :default-active="actived" 
    unique-opened
    @select="handleSelect"
    class="nav"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
  <template v-for="(item,index) in list">
    <el-submenu :index="item.title" v-if="item.child" :key="index">
      <template slot="title">
        <i :class="'iconfont icon-'+item.title"></i>
        <span>{{item.name}}</span>
      </template>
          <el-menu-item :index="items.title" v-for="(items,index) in item.child" :key="index">{{items.name}}</el-menu-item>
    </el-submenu>
    <el-menu-item :index="item.title" v-else :key="index">
      <i :class="'iconfont icon-'+item.title"></i>
      <span slot="title">{{item.name}}</span>
    </el-menu-item>
  </template>
  </el-menu>

js：

export default {
  name: "navigator",
  data() {
    return {
      actived:'/home',
      list: [
        {
            "name": "首页",
            "title": "home",
        },
        {
            "name": "故障",
            "title": "trouble",
            "child": [
              {
                "title": 'checkTrouble',
                "name": '检测',
              },
              {
                "name": '故障关联图片',
                "title": 'rePicTrouble',
              }
            ]
        },
        {
          "name": "参数设置",
          "title": "setPara",
          "child": [
            {
              "name": '参数设置和查询',
              "title": 'setParaSelect',
            }
          ]
        },
        {
          "name": "日志",
          "title": "dailyLog",
          "child": [
            {
              "name": '启动日志',
              "title": 'dailyLogStart',
            },
            {
              "name": '故障日志',
              "title": 'dailyLogTrouble',
            }
          ]
        },
        {
          "name": "权限",
          "title": "permission",
          "child": [
            {
              "name": '个人信息',
              "title": 'personalPermission',
            },
            {
              "name": '员工列表',
              "title": 'permissionList',
            }
          ]
        }
      ]
    };
  },
  beforeUpdate(){
  },
  mounted(){
   this.fetchData()
  },
  watch:{
   "$route":"fetchData"
  },
  methods: {
    handleSelect(key, keyPath) {//动态更改路由
      switch(keyPath[0]){
        case "home":
          this.$router.push("/"+key)
        break;
        case "setPara":
          this.$router.push("/setPara/"+key)
        break;
        case "trouble":
          this.$router.push("/trouble/"+key)
        break;
        case "permission":
          this.$router.push("/permission/"+key)
        break;
        case "dailyLog":
          this.$router.push("/dailyLog/"+key)
        break;
        default:
          this.$router.push("/home")
      }
    },
    fetchData(){//页面切换的时候控制左侧菜单样式
     this.actived = this.$route.name
    }
  }
};