关于element导航高亮

Question

需要点击一级路由后，打开二级路由。但点击二级路由中的元素的同时，一级路由的高亮状态不消失的功能。用的是vue和element框架。
在一级路由下面加了以下css代码也没出现任何效果

.router-link-active{
    color: #fff !important;
    background: #409eff !important;
}
.router-link-exact-active{
    color: #fff !important;
    background: #409eff !important;
}

布局代码

    <el-menu
            :default-active="$route.path"
            router
            class="el-menu-vertical-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#00284d"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="/Main/enterprise">企业管理</el-menu-item>
        <el-menu-item index="/layout/abnormalWarning">政府窗口</el-menu-item>
        <el-menu-item index="/layout/lawEnforcement">设备与权限管理</el-menu-item>
        <el-menu-item index="/layout/documentRelease">大屏管理</el-menu-item>
        <el-menu-item index="/layout/statisticalReport">账号管理</el-menu-item>
    </el-menu>
    

路由代码

    {
        //首页
        path: '/Main',
        name: '首页',
        component: () => import('@/views/layout/AppMain'),
        children: [
            {
                //企业监管
                name: '企业监管',
                path: 'enterprise',
                components: {
                    SecondTitle: () => import('@/views/layout/secondMenu/enterpriseManage'),
                },
                children: [
                    {
                        //企业管理首页
                        name: '企业管理首页',
                        path: 'homepage',
                        components: {
                            table: () => import('@/views/supplier/enterpriseManage/homePage'),
                        },
                    },
                    {
                        //动态报告
                        name: '动态报告',
                        path: 'dynamicReport',
                        components: {
                            table: () => import('@/views/supplier/enterpriseManage/dynamicReport'),
                        },
                    },
                    {
                        //动态管理
                        name: '动态管理',
                        path: 'dynamicManage',
                        components: {
                            table: () => import('@/views/supplier/enterpriseManage/dynamicManage'),
                        },
                    },
                    {
                        //员工信息管理
                        name: '员工信息管理',
                        path: 'employeesInfoManage',
                        components: {
                            table: () => import('@/views/supplier/enterpriseManage/employeesInfoManage'),
                        },
                    },
                    {
                        //考勤管理
                        name: '考勤管理',
                        path: 'attendanceManage',
                        components: {
                            table: () => import('@/views/supplier/enterpriseManage/attendanceManage'),
                        },
                    },
                    {
                        //台账管理
                        name: '台账管理',
                        path: 'parameterManage',
                        components: {
                            table: () => import('@/views/supplier/enterpriseManage/parameterManage'),
                        },
                    },
                    {
                        //报表管理
                        name: '报表管理',
                        path: 'reportManage',
                        components: {
                            table: () => import('@/views/supplier/enterpriseManage/reportManage'),
                        },
                    }]
            }]

想请问一下大佬，可以怎么改

Answer 1

1. 前两个属性适用于 <router-link> 标签；
2. 你可以监听路由变化，或者使用 router-link