解决element-ui侧边导航在页面刷新后失去高亮的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/littlebearGreat/article/details/80941039

element-ui  +  vue.js项目中，页面刷新后侧边导航失去高亮。在此，解决此问题

1. element-ui  提供一个属性 

:default-active='activeNav'

 来设置导航的默认高亮。可以利用这个属性来处理页面刷新后的高亮问题

2.在页面刷新的时候，获取地址栏中的地址，再写一个地址与做导航的配置文件，得出default-active  的值即可。

下面是我写的配置文件

// 路由地址对应左侧导航的index

let navConfig = {

'index' : '0',

'shell_manage' : '1',

'job_execution' : '2-0',

'periodic_task' : '2-1',

'job_query' : '2-2',

'approve_manage' : '3',

'module_manage' : '4',

'user_new' : '5-0',

'page_new' : '5-1',

'role_new' : '5-2'

};

function getActiveNav( href) {

let key = href. split( '/root/')[ 1];

return navConfig[key];

};

export default getActiveNav;

下面是在导航页面获取并设置 default-active 的方法

< template>

    < div id= "left-nav"> 

         <!-- 导航菜单 -->

        < el-menu :default-active='activeNav'>

        </ el-menu>

    </ div>

</ template>

< script>

import getActiveNav from '../../../assets/utils/leftNavConfig';

export default {

    name: 'navArea',     //导航区域

     data(){

         return {

            activeNav: '0'   /* 左侧菜单高亮项 */

        }

    },

     mounted() {

         this.activeNav = getActiveNav(window.location.href);

    },

    methods: {}

}

</ script>