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: {
      // 監(jiān)聽路由變化
      '$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>

路由配置文章來源地址http://www.zghlxwxcb.cn/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導航，進入對應的三級頁面菜單保持點擊狀態(tài)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！