Elementui NavMenu 导航菜单使用

浅浅的花香味﹌ 2022-10-27 13:57 9阅读 0赞

[官方文档https://element.eleme.cn/\#/zh-CN/component/menu][https_element.eleme.cn_zh-CN_component_menu]

### NavMenu 导航菜单 ###

*   *   *  官方使用
         *  项目实例

### 官方使用 ###

![在这里插入图片描述][20210204172135878.png_pic_center]

<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 进行路由跳转  
    ![在这里插入图片描述][20210204174022684.png_pic_center]

<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
          }
        }]
       }
     ]

导航下面为每个页面不同的内容（省略）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]

[https_element.eleme.cn_zh-CN_component_menu]: https://element.eleme.cn/#/zh-CN/component/menu
[20210204172135878.png_pic_center]: /images/20221024/046a5984e92d430e8f9f55f9bce38b6f.png
[20210204174022684.png_pic_center]: /images/20221024/b30017082e3842469b3056ea9b1d41bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/3a5f935a9e19478dac845c0e4070cfce.png