php三级菜单高亮不保持,菜单刷新之后高亮不在此menu，怎么样才能让它在页面刷新之后，menu的高亮样式还是这个menu...

不需要用vuex和storage，使用route也可以直接实现。

html代码：

theme="dark"

:openKeys="openKeys"

@openChange="onOpenChange"

mode="inline"

:defaultSelectedKeys="defaultSelectedKeys"

>

{{ item.name }}

>{{item.name}}

>

{{menuChildren.name}}

js代码：data() {

return {

defaultSelectedKeys: [this.$route.path],

openKeys: [""],

menuList,

};

},

created() {

const result = this.menuList;

this.menuList = result;

this.showMenu(result);

},

methods: {

showMenu(result) {

for (let i = 0; i < this.menuList.length; i++) {

if (result[i].children !== false) {

for (let y = 0; y < result[i].children.length; y++) {

if (result[i].children[y].router === this.$route.path) {

this.openKeys = [result[i].router]

}

}

}

}

},

onOpenChange(openKeys) {

if (openKeys.length !== 0) {

this.openKeys = [openKeys[1]];

} else {

this.openKeys = [""];

}

},

clickItem(obj) {

this.$router.push(obj.key);

},

},

列表数据：// 此处为动态获取的菜单数组

const menuList = [

{

name: "首页",

router: "/home",

icon: "database",

children: false,

},

{

name: "总览",

router: "/",

icon: "appstore",

children: [

{

name: "实时数据总览",

router: "/",

},

{

name: "历史数据总览",

router: "/historyCheckOV",

},

],

},

{

name: "场站",

router: "/stationRealTime",

icon: "database",

children: [

{

name: "场站实时数据",

router: "/stationRealTime",

},

{

name: "场站历史数据",

router: "/stationHistory",

},

{

name: "场站数据异常",

router: "/stationAbnormal",

},

],

},

{

name: "母线",

router: "/busRealTime",

icon: "branches",

children: [

{

name: "母线实时数据",

router: "/busRealTime",

},

{

name: "母线历史数据",

router: "/busHistory",

},

{

name: "母线数据校核",

router: "/busDataCheck",

},

],

},

{

name: "发电机",

router: "/PSrealTime",

icon: "interaction",

children: [

{

name: "发电机实时数据",

router: "/PSrealTime",

},

{

name: "发电机历史数据",

router: "/PShistrory",

},

{

name: "发电机数据校核",

router: "/PSdataCheck",

},

],

},

{

name: "线路",

router: "1",

icon: "pull-request",

children: [],

},

{

name: "变压器",

router: "2",

icon: "table",

children: [],

},

{

name: "无功补偿装置",

router: "3",

icon: "database",

children: [],

},

{

name: "质量标注",

router: "4",

icon: "file-done",

children: [],

},

];