zoukankan      html  css  js  c++  java
  • 解决elementUI中导航菜单(el-menu)页面刷新后的菜单选中问题

    解决elementUI中导航菜单(el-menu)页面刷新后的菜单选中问题

    情况一:单个菜单页面刷新导航失去高亮;(如下图这种菜单类型)

    问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下:

    <el-menu :default-active="activeIndex"
             mode="horizontal"
             :router="true"
             background-color="#091639"
             text-color="#fff"
             active-text-color="#FEC002"
             @select="handleSelect">
        <el-menu-item index="/device_new/">设备管理</el-menu-item>
        <el-menu-item index="/monitor/">状态监测</el-menu-item>
        <el-menu-item index="/fault_new/">故障诊断</el-menu-item>
        <el-menu-item index="/trend_new/">趋势分析</el-menu-item>
        <el-menu-item index="/spectrogram/">谱图分析</el-menu-item>
    </el-menu>
    
     data(){
                return {
                    activeIndex: '/device_new/',
                    title: '设备管理'
                }
            },
            mounted() {
                this.activeIndex = this.$route.path
            },
    

    情况二:嵌套路由,当选中子路由时父级菜单要高亮显示,单前选中菜单也是被选中的颜色;(如下图)

    当选中版本管理时,版本管理的被选中,同时父级菜单“系统配置”也将高亮显示;

     <el-menu
                        :default-active="navLeftActive"
                        class="el-menu-demo"
                        mode="horizontal"
                        :router="true"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        background-color="#283045"
                    >
                        <div class="group-item group-item-left">
                            <el-submenu index="/sys/" v-if="permissionList['system']" class="is-show-name">
                                <template slot="title">
                                    <img
                                        src="@/assets/images/head/xtpz_v.png"
                                        alt
                                        v-if="pathUrl == '/sys/'"
                                    />
                                    <img src="@/assets/images/head/xtpz_n.png" alt v-else />
                                    <span class="menu-name">{{$t('lang.MSconfig')}}</span>
                                </template>
                                <el-menu-item
                                    index="/sys/"
                                    v-if="permissionList['user']"
                                >{{$t('lang.users-manage')}}</el-menu-item>
                                <el-menu-item
                                    index="/area/"
                                    v-if="permissionList['area']"
                                >{{$t('lang.area-manage')}}</el-menu-item>
                                <el-menu-item
                                    index="/message/"
                                    v-if="permissionList['message']"
                                >{{$t('lang.message-center')}}</el-menu-item>
                                <el-menu-item
                                    index="/log/system"
                                    v-if="permissionList['log']"
                                >{{$t('lang.syslog')}}</el-menu-item>
                                <el-menu-item
                                    index="/version/android"
                                    v-if="permissionList['version']"
                                >{{$t('lang.version-manage')}}</el-menu-item>
                                <el-menu-item
                                        index="/ota/"
                                        v-if="permissionList['ota']"
                                >{{$t('lang.ota')}}</el-menu-item>
                                <el-menu-item
                                        index="/decrypt/"
                                        v-if="permissionList['decrypt']"
                                >{{$t('lang.decrypt-record')}}</el-menu-item>      
                            </el-submenu>
                        </div>
                    </el-menu>
    <script>
    	computed: {
            navLeftActive: function() {
                console.log(this.$route)
                const {meta, path} = this.$route
                if(meta.activeMenu){
                    return meta.activeMenu
                }
                return path
            },
            pathUrl: function() {
                if (this.currentRoute.name) {
                    return "/" + this.$route.name.split("_")[0] + "/";
                }
            },
        }
    
    </script>
    
    const UserRouter = [
        {
            path: '/sys',
            component: () => import('@/views/admin/system/user/List.vue'),
            children: [
                {
                    path: '/',
                    component: () => import('@/views/admin/system/user/List.vue'),
                    name:'sys_user',
                    meta: {
                        activeMenu: '/sys/'
                    }
                },
                {
                    path: 'role',
                    component: () => import('@/views/admin/system/user/Role.vue'),
                    name:'sys_role',
                    meta: {
                        activeMenu: '/sys/'
                    }
                },
                {
                    path: 'detail',
                    component: () => import('@/views/admin/system/user/Detail'),
                    name:'sys_userDetail',
                    meta: {
                        activeMenu: '/sys/'
                    }
                }
            ]
        }
    
    
    export default UserRouter;
    
    

    上面分别为路由组件和“系统配置”下“用户管理"的路由,解决方案为在路由文件的每个子路由都添加与父级(系统配置)相对应的路由信息activeMenu,再通过default-active的值来绑定activeMenu的值即可高亮显示父级菜单了。

    tips:开发中遇到的坑,el-menu中的index的值例如index=‘/sys/’一定得和路由文件的path值相对应如果path写成“/sys”少了后面的“/”路由也能调转,但是菜单就是不会高亮显示

  • 相关阅读:
    Camunda工作流——第三章 网关
    Camunda工作流——第二章 任务
    Camunda工作流——第一章 参与者
    需求库规划库储备库四库更新区域类型到meta_localinfo表
    备份需求库规划库储备库四库数据到temp模式里
    php 处理高精度计算函数
    php 使用file_put_content将 数据 push 到csv文件中
    忘记rabbitmq账号密码?创建rabbitmq新用户
    docker+nginx+consul+swoft 实现动态负载均衡
    docker 基础操作
  • 原文地址:https://www.cnblogs.com/xmbhyw/p/14510507.html
Copyright © 2011-2022 走看看