在做项目的时候,遇到一个问题,当刷新页面或者路由跳页的时候,导航的激活菜单和当前显示的组件不匹配。
主要分为两种情况
1、router跳页,这里主要是监听router的变化,调用updateOpened方法。
2、F5刷新页面,调用updateOpened方法。
话不多说,上代码,
<template>
<div>
<Sider class="frame-sider" width="230" collapsible>
<Menu
width="180"
class="sider-menu"
theme="light"
ref="siderMenu"
:open-names="openName"
accordion
:active-name="sideName"
>
<MenuItem name="workbench" to="/workbench">
<i class="iconfont icon-gongzuotai"></i>
<span>工作台</span>
</MenuItem>
<Submenu name="dailyWork">
<template slot="title">
<i class="iconfont icon-richang"></i>
日常工作
</template>
<MenuItem name="popAppeal" to="/dailyWork/popAppeal">民意诉求</MenuItem>
<MenuItem name="popLog" to="/dailyWork/popLog">民情日志</MenuItem>
</Submenu>
</Menu>
</Sider>
</div>
</template>
<script>
export default {
name: "adminFrame",
data() {
return {
sideName: "popAppeal",//路由的最后一个路径/dailyWork/popAppeal
openName: ["dailyWork"],//菜单,一级是为空,二级是路由的第一个路径
};
},
methods: {
menuReloadFn(fullPath) {
//这里判断是否为二级菜单,用最后一个path赋值
if (fullPath.length > 2) {
this.openName = [];
this.openName.push(fullPath[1]);
this.sideName = fullPath[2];
} else {
this.openName = [];
this.sideName = fullPath[1];
}
this.$nextTick(() => {
this.$refs.siderMenu.updateOpened();
});
}
},
watch: {
$route(val) {
const fullPath = val.fullPath.split("/");
this.menuReloadFn(fullPath);
}
},
mounted() {
const fullPath = this.$router.history.current.fullPath.split("/");
this.menuReloadFn(fullPath);
}
};