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

梦想家加一

于 2023-09-04 14:23:48 发布

阅读量1k

点赞数

分类专栏：前端问题文章标签： ui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_60196946/article/details/132668272

版权

前端问题专栏收录该内容

20 篇文章

订阅专栏

文章讲述了在Vue项目中如何在路由配置中使用`keepAlive`属性以实现页面缓存，并通过`NavMenu`组件展示了如何根据路由变化动态高亮导航菜单项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.注意事项

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

2.使用的方法

NavMenu 导航菜单

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>

路由配置

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