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

    1.注意事项

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

    2.使用的方法

    3.项目实例

    2. <script>
    3.   export default {
    4.     data() {
    5.       return {
    6.         activeIndex: '/policyjisuan',
    7.       };
    8.     },
    9.     watch: {
    10.       // 监听路由变化
    11.       '$route.path': {
    12.         handler (routePath) {
    13.           this.initMenuActive(routePath)
    14.         },
    15.         immediate: true
    16.       }
    17.     },
    18.     methods: {
    19.       initMenuActive (routePath) {
    20. 		//路由跳转时，标记在导航的哪个选项下对应的路由，css高亮显示
    21.         if (routePath == '/loginPolicy') {
    22.           this.activeIndex = '/policyjisuan'
    23.         } else if(routePath == '/searchDetail'){
    24.           this.activeIndex = '/searchP'
    25.         } else if(routePath == '/applyDetail'){
    26.           this.activeIndex = '/applyNews'
    27.         } else if(routePath == '/calculateDetail'){
    28.           this.activeIndex = '/policyjisuan'
    29.         } else if(routePath == '/companyDetail'){
    30.           this.activeIndex = '/policyjisuan'
    31.         } else if(routePath == '/originalDetail'){
    32.           this.activeIndex = '/original'
    33.         } else {
    34.           this.activeIndex = routePath
    35.         }
    36.       },
    37.     }
    38.   }
    39. script>
    40.  
    41. <style lang="scss" scoped>
    42.   /* 导航下页面 */
    43.   .navContent {
    44.     min-height: 800px;
    45.     padding-bottom: 70px;
    46.     background-color: #fff;
    47.   }
    48.     .policyNav {
    49.  
    50.     .el-menu-item {
    51.       text-align: center;
    52.       border-bottom: none;
    53.       width: 16%;
    54.       font-size: 22px;
    55.       font-weight: 500;
    56.       background-color: #486DC0 !important;
    57.     }
    58.  
    59.     .el-menu {
    60.       background-color: #486DC0 !important;
    61.     }
    62.   }
    63. style>
    64.

    路由配置

    1. js文件
    2. export default [
    3.  {
    4.     path: '/policyStoreIndex',
    5.     name: '政策计算器导航页',
    6.     redirect: '/policyjisuan',
    7.     component: () =>
    8.       import(/* webpackChunkName: "page" */ '@/views/home/policyStoreIndex'),
    9.     meta: {
    10.       keepAlive: true,
    11.       isTab: false,
    12.       isAuth: false
    13.     },
    14.     children: [
    15.     {
    16.       path: '/searchP',
    17.       name: '检索',
    18.       component: () =>
    19.         import(/* webpackChunkName: "page" */ '@/views/home/policyStoreNew/searchP'),
    20.       meta: {
    21.         keepAlive: true,
    22.         isTab: false,
    23.         isAuth: false
    24.       }
    25.     }]
    26.    }
    27.  ]   
    28.  
    29.

  • 相关阅读:
    面试题：说说Java线程的状态及转换
    GoldenEye
    如果用nodejs开发一个网站
    浅述数据中心供配电系统解决方案及产品选型
    云原生2.0时代，如何让应用拥抱云原生？
    9.变换之平移
    PCL 点云投影到圆柱（C++详细过程版）
    SpringBoot--中间件技术-2：整合redis，redis实战小案例，springboot cache，cache简化redis的实现，含代码
    Rasa 3.x 机器学习构建笔记
    Vue中的.sync修饰符
  • 原文地址：https://blog.csdn.net/weixin_60196946/article/details/132668272