feat: 路由meta添加activePath可将某个菜单激活,主要用于通过queryparams传参的路由

This commit is contained in:
xiaoxian521
2023-06-13 22:18:23 +08:00
parent 5d86b714a4
commit 58cafbc73f
9 changed files with 135 additions and 110 deletions

View File

@@ -1,8 +1,9 @@
<script setup lang="ts">
import { ref, nextTick } from "vue";
import Search from "../search/index.vue";
import Notice from "../notice/index.vue";
import SidebarItem from "./sidebarItem.vue";
import { isAllEmpty } from "@pureadmin/utils";
import { ref, nextTick, computed } from "vue";
import { useNav } from "@/layout/hooks/useNav";
import { useTranslationLang } from "../../hooks/useTranslationLang";
import { usePermissionStoreHook } from "@/store/modules/permission";
@@ -27,6 +28,10 @@ const {
getDropdownItemClass
} = useNav();
const defaultActive = computed(() =>
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
);
nextTick(() => {
menuRef.value?.handleResize();
});
@@ -46,7 +51,7 @@ nextTick(() => {
ref="menuRef"
mode="horizontal"
class="horizontal-header-menu"
:default-active="route.path"
:default-active="defaultActive"
>
<sidebar-item
v-for="route in usePermissionStoreHook().wholeMenus"

View File

@@ -2,6 +2,7 @@
import extraIcon from "./extraIcon.vue";
import Search from "../search/index.vue";
import Notice from "../notice/index.vue";
import { isAllEmpty } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import { transformI18n } from "@/plugins/i18n";
import { ref, toRaw, watch, onMounted, nextTick } from "vue";
@@ -36,10 +37,9 @@ function getDefaultActive(routePath) {
const wholeMenus = usePermissionStoreHook().wholeMenus;
/** 当前路由的父级路径 */
const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
defaultActive.value = findRouteByPath(
parentRoutes,
wholeMenus
)?.children[0]?.path;
defaultActive.value = !isAllEmpty(route.meta?.activePath)
? route.meta.activePath
: findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
}
onMounted(() => {

View File

@@ -5,8 +5,8 @@ import { emitter } from "@/utils/mitt";
import SidebarItem from "./sidebarItem.vue";
import leftCollapse from "./leftCollapse.vue";
import { useNav } from "@/layout/hooks/useNav";
import { storageLocal } from "@pureadmin/utils";
import { responsiveStorageNameSpace } from "@/config";
import { storageLocal, isAllEmpty } from "@pureadmin/utils";
import { findRouteByPath, getParentPaths } from "@/router/utils";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
@@ -32,7 +32,13 @@ const loading = computed(() =>
pureApp.layout === "mix" ? false : menuData.value.length === 0 ? true : false
);
function getSubMenuData(path: string) {
const defaultActive = computed(() =>
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
);
function getSubMenuData() {
let path = "";
path = defaultActive.value;
subMenuData.value = [];
// path的上级路由组成的数组
const parentPathArr = getParentPaths(
@@ -48,18 +54,18 @@ function getSubMenuData(path: string) {
subMenuData.value = parenetRoute?.children;
}
getSubMenuData(route.path);
watch(
() => [route.path, usePermissionStoreHook().wholeMenus],
() => {
if (route.path.includes("/redirect")) return;
getSubMenuData(route.path);
getSubMenuData();
menuSelect(route.path);
}
);
onMounted(() => {
getSubMenuData();
emitter.on("logoChange", key => {
showLogo.value = key;
});
@@ -87,7 +93,7 @@ onBeforeUnmount(() => {
mode="vertical"
class="outer-most select-none"
:collapse="isCollapse"
:default-active="route.path"
:default-active="defaultActive"
:collapse-transition="false"
>
<sidebar-item

View File

@@ -166,7 +166,7 @@ function onFresh() {
path: "/redirect" + fullPath,
query
});
handleAliveRoute(route as toRouteType, "refresh");
handleAliveRoute(route as ToRouteType, "refresh");
}
function deleteDynamicTag(obj: any, current: any, tag?: string) {
@@ -239,7 +239,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
function deleteMenu(item, tag?: string) {
deleteDynamicTag(item, item.path, tag);
handleAliveRoute(route as toRouteType);
handleAliveRoute(route as ToRouteType);
}
function onClickDrop(key, item, selectRoute?: RouteConfigs) {
@@ -287,7 +287,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
length: multiTags.value.length
});
router.push(topPath);
handleAliveRoute(route as toRouteType);
handleAliveRoute(route as ToRouteType);
break;
case 6:
// 整体页面全屏