Skip to content

Commit

Permalink
feat(projects): 支持同一路由根据不同query和hash同时显示不同Tab
Browse files Browse the repository at this point in the history
ISSUES CLOSED: #64
  • Loading branch information
honghuangdc committed Jun 6, 2022
1 parent 434ab1c commit 4122685
Show file tree
Hide file tree
Showing 20 changed files with 363 additions and 88 deletions.
106 changes: 100 additions & 6 deletions mock/model/route.ts
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,53 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
order: 5
}
},
{
name: 'function',
path: '/function',
component: 'basic',
children: [
{
name: 'function_tab',
path: '/function/tab',
component: 'self',
meta: {
title: 'Tab',
requiresAuth: true,
icon: 'ic:round-tab'
}
},
{
name: 'function_tab-detail',
path: '/function/tab-detail',
component: 'self',
meta: {
title: 'Tab Detail',
requiresAuth: true,
hide: true,
activeMenu: 'function_tab',
icon: 'ic:round-tab'
}
},
{
name: 'function_tab-multi-detail',
path: '/function/tab-multi-detail',
component: 'self',
meta: {
title: 'Tab Multi Detail',
requiresAuth: true,
hide: true,
multiTab: true,
activeMenu: 'function_tab',
icon: 'ic:round-tab'
}
}
],
meta: {
title: '功能',
icon: 'ri:function-line',
order: 6
}
},
{
name: 'exception',
path: '/exception',
Expand Down Expand Up @@ -341,7 +388,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
meta: {
title: '异常页',
icon: 'ant-design:exception-outlined',
order: 6
order: 7
}
},
{
Expand Down Expand Up @@ -395,7 +442,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
meta: {
title: '多级菜单',
icon: 'carbon:menu',
order: 7
order: 8
}
},
{
Expand All @@ -407,7 +454,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
requiresAuth: true,
singleLayout: 'basic',
icon: 'fluent:book-information-24-regular',
order: 8
order: 9
}
}
],
Expand Down Expand Up @@ -704,6 +751,53 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
order: 5
}
},
{
name: 'function',
path: '/function',
component: 'basic',
children: [
{
name: 'function_tab',
path: '/function/tab',
component: 'self',
meta: {
title: 'Tab',
requiresAuth: true,
icon: 'ic:round-tab'
}
},
{
name: 'function_tab-detail',
path: '/function/tab-detail',
component: 'self',
meta: {
title: 'Tab Detail',
requiresAuth: true,
hide: true,
activeMenu: 'function_tab',
icon: 'ic:round-tab'
}
},
{
name: 'function_tab-multi-detail',
path: '/function/tab-multi-detail',
component: 'self',
meta: {
title: 'Tab Multi Detail',
requiresAuth: true,
hide: true,
multiTab: true,
activeMenu: 'function_tab',
icon: 'ic:round-tab'
}
}
],
meta: {
title: '功能',
icon: 'ri:function-line',
order: 6
}
},
{
name: 'exception',
path: '/exception',
Expand Down Expand Up @@ -743,7 +837,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
meta: {
title: '异常页',
icon: 'ant-design:exception-outlined',
order: 6
order: 7
}
},
{
Expand Down Expand Up @@ -797,7 +891,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
meta: {
title: '多级菜单',
icon: 'carbon:menu',
order: 7
order: 8
}
},
{
Expand All @@ -809,7 +903,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
requiresAuth: true,
singleLayout: 'basic',
icon: 'fluent:book-information-24-regular',
order: 8
order: 9
}
}
],
Expand Down
2 changes: 1 addition & 1 deletion src/enum/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export enum EnumStorageKey {
/** 用户信息 */
'user-info' = '__USER_INFO__',
/** 多页签路由信息 */
'tab-routes' = '__TAB_ROUTES__'
'multi-tab-routes' = '__MULTI_TAB_ROUTES__'
}

/** 数据类型 */
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/common/GlobalContent/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
@after-enter="handleAfterEnter"
>
<keep-alive :include="routeStore.cacheRoutes">
<component :is="Component" v-if="app.reloadFlag" :key="route.path" />
<component :is="Component" v-if="app.reloadFlag" :key="route.fullPath" />
</keep-alive>
</transition>
</router-view>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const options = computed<Option[]>(() => [
{
label: '关闭',
key: 'close-current',
disabled: props.currentPath === tab.homeTab.path,
disabled: props.currentPath === tab.homeTab.fullPath,
icon: iconifyRender('ant-design:close-outlined')
},
{
Expand Down
16 changes: 8 additions & 8 deletions src/layouts/common/GlobalTab/components/TabDetail/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
<component
:is="activeComponent"
v-for="(item, index) in tab.tabs"
:key="item.path"
:is-active="tab.activeTab === item.path"
:key="item.fullPath"
:is-active="tab.activeTab === item.fullPath"
:primary-color="theme.themeColor"
:closable="item.path !== tab.homeTab.path"
:closable="item.name !== tab.homeTab.name"
:dark-mode="theme.darkMode"
:class="{ '!mr-0': isChromeMode && index === tab.tabs.length - 1, 'mr-10px': !isChromeMode }"
@click="tab.handleClickTab(item.path)"
@close="tab.removeTab(item.path)"
@contextmenu="handleContextMenu($event, item.path)"
@click="tab.handleClickTab(item.fullPath)"
@close="tab.removeTab(item.fullPath)"
@contextmenu="handleContextMenu($event, item.fullPath)"
>
<Icon v-if="item.meta.icon" :icon="item.meta.icon" class="inline-block align-text-bottom mr-4px text-16px" />
{{ item.meta.title }}
Expand Down Expand Up @@ -77,11 +77,11 @@ function setDropdown(x: number, y: number, currentPath: string) {
}
/** 点击右键菜单 */
async function handleContextMenu(e: MouseEvent, path: string) {
async function handleContextMenu(e: MouseEvent, fullPath: string) {
e.preventDefault();
const { clientX, clientY } = e;
hideDropdown();
setDropdown(clientX, clientY, path);
setDropdown(clientX, clientY, fullPath);
await nextTick();
showDropdown();
}
Expand Down
4 changes: 2 additions & 2 deletions src/layouts/common/GlobalTab/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,10 @@ function init() {
}
watch(
() => route.path,
() => route.fullPath,
() => {
tab.addTab(route);
tab.setActiveTab(route.path);
tab.setActiveTab(route.fullPath);
}
);
Expand Down
9 changes: 2 additions & 7 deletions src/router/guard/dynamic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,10 @@ export async function createDynamicRouteGuard(

if (to.name === routeName('not-found-page')) {
// 动态路由没有加载导致被not-found-page路由捕获,等待权限路由加载好了,回到之前的路由

// 若路由是从根路由重定向过来的,重新回到根路由
const ROOT_ROUTE_NAME: AuthRoute.RouteKey = 'root';
if (to.redirectedFrom?.name === ROOT_ROUTE_NAME) {
next({ path: '/', replace: true, query: to.query });
return false;
}

next({ path: to.fullPath, replace: true, query: to.query });
const path = to.redirectedFrom?.name === ROOT_ROUTE_NAME ? '/' : to.fullPath;
next({ path, replace: true, query: to.query, hash: to.hash });
return false;
}
}
Expand Down
11 changes: 7 additions & 4 deletions src/router/helpers/scroll.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,13 @@ export const scrollBehavior: RouterScrollBehavior = (to, from) => {
const tab = useTabStore();

if (to.hash) {
resolve({
el: to.hash,
behavior: 'smooth'
});
const el = document.querySelector(to.hash);
if (el) {
resolve({
el,
behavior: 'smooth'
});
}
}

const { left, top } = tab.getTabScrollPosition(to.path);
Expand Down
2 changes: 1 addition & 1 deletion src/router/modules/about.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const about: AuthRoute.Route = {
singleLayout: 'basic',
permissions: ['super', 'admin', 'user'],
icon: 'fluent:book-information-24-regular',
order: 8
order: 9
}
};

Expand Down
2 changes: 1 addition & 1 deletion src/router/modules/exception.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const exception: AuthRoute.Route = {
meta: {
title: '异常页',
icon: 'ant-design:exception-outlined',
order: 6
order: 7
}
};

Expand Down
49 changes: 49 additions & 0 deletions src/router/modules/function.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
const functionRoute: AuthRoute.Route = {
name: 'function',
path: '/function',
component: 'basic',
children: [
{
name: 'function_tab',
path: '/function/tab',
component: 'self',
meta: {
title: 'Tab',
requiresAuth: true,
icon: 'ic:round-tab'
}
},
{
name: 'function_tab-detail',
path: '/function/tab-detail',
component: 'self',
meta: {
title: 'Tab Detail',
requiresAuth: true,
hide: true,
activeMenu: 'function_tab',
icon: 'ic:round-tab'
}
},
{
name: 'function_tab-multi-detail',
path: '/function/tab-multi-detail',
component: 'self',
meta: {
title: 'Tab Multi Detail',
requiresAuth: true,
hide: true,
multiTab: true,
activeMenu: 'function_tab',
icon: 'ic:round-tab'
}
}
],
meta: {
title: '功能',
icon: 'ri:function-line',
order: 6
}
};

export default functionRoute;
2 changes: 1 addition & 1 deletion src/router/modules/multi-menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const multiMenu: AuthRoute.Route = {
meta: {
title: '多级菜单',
icon: 'carbon:menu',
order: 6
order: 8
}
};

Expand Down
Loading

0 comments on commit 4122685

Please sign in to comment.