使用element-ui导航，进入对应的三级页面菜单保持点击状态-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用element-ui导航，进入对应的三级页面菜单保持点击状态。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.注意事项

01.路由中使用了keepAlive属性，要用keepAlive：true，不能等于false，使用false页面会刷新

2.使用的方法

NavMenu 导航菜单

使用element-ui导航，进入对应的三级页面菜单保持点击状态,ui,vue.js,javascript

3.项目实例

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

路由配置文章来源地址https://www.toymoban.com/news/detail-695622.html

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

到了这里，关于使用element-ui导航，进入对应的三级页面菜单保持点击状态的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！