点击跳转到别的页面图
页面跳转了,但是menu并没有变化,只有再刷新才会重新获取地址再展开,这个如何解决呢?
changeView(name) {
switch (name) {
case "遥测":
this.$router.replace({ path: "/stationRealTime" });
break;
case "母线":
this.$router.replace({ path: "/busRealTime" });
break;
case "线路":
this.$router.replace({ path: "/lineRealTime" });
break;
case "变压器":
this.$router.push({ path: "/transRealTime" });
break;
case "发电机":
this.$router.push({ path: "/PSrealTime" });
break;
case "无功补偿装置":
this.$router.push({ path: "/statcomRealTime" });
break;
default:
console.log("数据不存在");
}
},
html
<!-- ant的menu -->
<a-menu
theme="dark"
:openKeys="openKeys"
@openChange="onOpenChange"
mode="inline"
:defaultSelectedKeys="defaultSelectedKeys"
>
<template v-for="item in menuList">
<a-menu-item v-if="item.children === false" :key="item.router">
<icon-font :class="item.class" :type="item.icon" />
<router-link class="home-page" :to="item.router" >{{item.name}}</router-link>
</a-menu-item>
<a-sub-menu v-else :key="item.router">
<span slot="title">
<icon-font :class="item.class" :type="item.icon" />
<span>{{item.name}}</span>
</span>
<a-menu-item v-for="menuChildren in item.children" :key="menuChildren.router">
<router-link style="display:block" :to="menuChildren.router">{{menuChildren.name}}</router-link>
</a-menu-item>
</a-sub-menu>
</template>
</a-menu>
<!-- 显示子路由的router-view -->
<a-layout-content>
<router-view
class="home-con"
:default-active="$route.path"
></router-view>
</a-layout-content>
js:
export default {
name: "Home",
data() {
return {
defaultSelectedKeys: [this.$route.path],
openKeys: this.$store.state.openKeys,
menuList,
};
},
components: {
"header-side": headerSide,
IconFont,
},
created() {
const result = this.menuList;
this.menuList = result;
this.showMenu(result);
},
mounted() {
// 监听页面刷新事件
window.addEventListener("unload", this.saveStatus);
},
computed: {
collapsed: {
get: function() {
return this.$store.state.status.collapsed;
},
set: function(newData) {
return newData;
},
activePath() {
return this.$route.path;
},
},
},
methods: {
// 保存侧边栏展开,关闭标识
saveStatus() {
sessionStorage.setItem(
"changeStatus",
JSON.stringify(this.$store.state.status.collapsed)
);
},
// menu事件
showMenu(result) {
// console.log(this.$store.state.openKeys)
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) {
console.log(this.$store.state.openKeys)
if (openKeys.length !== 0) {
this.openKeys = [openKeys[1]];
} else {
this.openKeys = [""];
}
},
clickItem(obj) {
this.$router.push(obj.key);
},
},
};
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…