Elementui NavMenu 导航菜单使用

官方文档https://element.eleme.cn/#/zh-CN/component/menu

官方使用

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

项目实例

• 使用 <router-view></router-view>进行路由跳转，实现在外层写导航，点击导航跳转不同页面。

• router属性：启用该模式会在激活导航时以 index 作为 path 进行路由跳转
  

<template>
  <div class="policy-home">
   <div class="policyNav">
    <el-menu :default-active="activeIndex"
            background-color="#486DC0"
            text-color="#FFFFFF"
            active-text-color="#FFF000"
            class="el-menu-demo"
            mode="horizontal"
            :router="true">
      <el-menu-item index="/policyjisuan">政策计算器</el-menu-item>
      <el-menu-item index="/searchP">检索</el-menu-item>
      <el-menu-item index="/policyStoreGraphic">政策图解</el-menu-item>
      <el-menu-item index="/applyNews">今日申报</el-menu-item>
      <el-menu-item index="/original">政策原文</el-menu-item>
    </el-menu>
   </div>
   <div class="navContent">
     <router-view></router-view>
   </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        activeIndex: '/policyjisuan',
      };
    },
    watch: {
      // 监听路由变化
      '$route.path': {
        handler (routePath) {
          this.initMenuActive(routePath)
        },
        immediate: true
      }
    },
    methods: {
      initMenuActive (routePath) {
		//路由跳转时，标记在导航的哪个选项下对应的路由，css高亮显示
        if (routePath == '/loginPolicy') {
          this.activeIndex = '/policyjisuan'
        } else if(routePath == '/searchDetail'){
          this.activeIndex = '/searchP'
        } else if(routePath == '/applyDetail'){
          this.activeIndex = '/applyNews'
        } else if(routePath == '/calculateDetail'){
          this.activeIndex = '/policyjisuan'
        } else if(routePath == '/companyDetail'){
          this.activeIndex = '/policyjisuan'
        } else if(routePath == '/originalDetail'){
          this.activeIndex = '/original'
        } else {
          this.activeIndex = routePath
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  /* 导航下页面 */
  .navContent {
    min-height: 800px;
    padding-bottom: 70px;
    background-color: #fff;
  }
    .policyNav {

    .el-menu-item {
      text-align: center;
      border-bottom: none;
      width: 16%;
      font-size: 22px;
      font-weight: 500;
      background-color: #486DC0 !important;
    }

    .el-menu {
      background-color: #486DC0 !important;
    }
  }
</style>

路由配置：

js文件
export default [
 {
    path: '/policyStoreIndex',
    name: '政策计算器导航页',
    redirect: '/policyjisuan',
    component: () =>
      import(/* webpackChunkName: "page" */ '@/views/home/policyStoreIndex'),
    meta: {
      keepAlive: true,
      isTab: false,
      isAuth: false
    },
    children: [
    {
      path: '/searchP',
      name: '检索',
      component: () =>
        import(/* webpackChunkName: "page" */ '@/views/home/policyStoreNew/searchP'),
      meta: {
        keepAlive: true,
        isTab: false,
        isAuth: false
      }
    }]
   }
 ]   
 
      

导航下面为每个页面不同的内容（省略）