fix(menu): 刷新后菜单选中项不匹配的问题
This commit is contained in:
parent
54966747c6
commit
0044cdb62c
@ -12,15 +12,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { h, ref } from 'vue';
|
import {h, onMounted, ref, watch} from 'vue';
|
||||||
import {
|
import {
|
||||||
MailOutlined,
|
MailOutlined,
|
||||||
CalendarOutlined,
|
CalendarOutlined,
|
||||||
AppstoreOutlined,
|
AppstoreOutlined,
|
||||||
SettingOutlined,
|
SettingOutlined,
|
||||||
} from '@ant-design/icons-vue';
|
} from '@ant-design/icons-vue';
|
||||||
import {useRouter} from "vue-router";
|
import {useRoute, useRouter} from "vue-router";
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const route = useRoute(); // 新增路由实例
|
||||||
const theme = ref('light');
|
const theme = ref('light');
|
||||||
const selectedKeys = ref(['1']);
|
const selectedKeys = ref(['1']);
|
||||||
const openKeys = ref(['sub1']);
|
const openKeys = ref(['sub1']);
|
||||||
@ -68,4 +69,36 @@ const handleMenuClick = ({ key }) => {
|
|||||||
router.push(item.path);
|
router.push(item.path);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
// 查找匹配当前路由的菜单key
|
||||||
|
const findSelectedKey = (menuItems, currentPath) => {
|
||||||
|
for (const item of menuItems) {
|
||||||
|
// 检查当前菜单项
|
||||||
|
if (item.path === currentPath) {
|
||||||
|
return [item.key];
|
||||||
|
}
|
||||||
|
// 递归检查子菜单
|
||||||
|
if (item.children) {
|
||||||
|
const found = findSelectedKey(item.children, currentPath);
|
||||||
|
if (found) return found;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化时设置选中状态
|
||||||
|
const updateMenuState = () => {
|
||||||
|
const matchedKeys = findSelectedKey(items.value, route.path);
|
||||||
|
if (matchedKeys) {
|
||||||
|
selectedKeys.value = matchedKeys;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听路由变化
|
||||||
|
watch(() => route.path, () => {
|
||||||
|
updateMenuState();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化执行一次
|
||||||
|
onMounted(updateMenuState);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user