ElementUI

问题描述

在使用ElementUI的NavMenu导航组件时，点击导航栏跳转导航栏高亮正常，而当我刷新页面时，高亮就会变回首页。

初始代码

1
2
3
4
5
6
7
<el-menu
               :default-active="/"
               class="el-menu-vertical-demo"
               @open="handleOpen"
               @close="handleClose"
               router
       >

问题截图

正常点击导航就会跳转至对应的路径

image-20220113163915138

当刷新页面时，导航高亮就会变回首页

image-20220113171349287

原因分析

查找一些博客后，我搞明白了原因。el-menu的default-active参数内就是当前选中的导航项，这里我写的是首页的路径。当点击其他导航项时，default-active的值会被组件更新，此时高亮是正常的。当刷新页面时，default-active的值会被重置为初始值，所以就变成了首页高亮。

解决

解决方法就是动态传入当前路径，将$route.path绑定在default-active上。

修改代码

1
2
3
4
5
6
7
<el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router
>

注意不要忘了router参数以及:default-active前的冒号