fix(projects): fix:tab切换路由fullpath

支持tab页切换路由参数保留

ISSUES CLOSED: #64
This commit is contained in:
liuweiguo 2022-04-22 11:12:36 +08:00
parent 219f87f467
commit df5383e86f
5 changed files with 10 additions and 33 deletions

25
components.d.ts vendored
View File

@ -13,17 +13,9 @@ declare module 'vue' {
IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default'] IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default']
IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default'] IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default'] IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
IconCustomActivity: typeof import('~icons/custom/activity')['default']
IconCustomAvatar: typeof import('~icons/custom/avatar')['default'] IconCustomAvatar: typeof import('~icons/custom/avatar')['default']
IconCustomBanner: typeof import('~icons/custom/banner')['default']
IconCustomCast: typeof import('~icons/custom/cast')['default']
IconCustomEmptyData: typeof import('~icons/custom/empty-data')['default']
IconCustomLogo: typeof import('~icons/custom/logo')['default'] IconCustomLogo: typeof import('~icons/custom/logo')['default']
IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default'] IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default']
IconCustomNetworkError: typeof import('~icons/custom/network-error')['default']
IconCustomNoPermission: typeof import('~icons/custom/no-permission')['default']
IconCustomNotFound: typeof import('~icons/custom/not-found')['default']
IconCustomServiceError: typeof import('~icons/custom/service-error')['default']
IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default'] IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default'] IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default'] IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default']
@ -37,7 +29,6 @@ declare module 'vue' {
IconMdiPin: typeof import('~icons/mdi/pin')['default'] IconMdiPin: typeof import('~icons/mdi/pin')['default']
IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default'] IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default']
IconMdiRefresh: typeof import('~icons/mdi/refresh')['default'] IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
IconMdiWechat: typeof import('~icons/mdi/wechat')['default']
IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default'] IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default'] IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default']
IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default'] IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default']
@ -51,46 +42,30 @@ declare module 'vue' {
NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem'] NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
NButton: typeof import('naive-ui')['NButton'] NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard'] NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NColorPicker: typeof import('naive-ui')['NColorPicker'] NColorPicker: typeof import('naive-ui')['NColorPicker']
NConfigProvider: typeof import('naive-ui')['NConfigProvider'] NConfigProvider: typeof import('naive-ui')['NConfigProvider']
NDataTable: typeof import('naive-ui')['NDataTable']
NDescriptions: typeof import('naive-ui')['NDescriptions']
NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
NDialogProvider: typeof import('naive-ui')['NDialogProvider'] NDialogProvider: typeof import('naive-ui')['NDialogProvider']
NDivider: typeof import('naive-ui')['NDivider'] NDivider: typeof import('naive-ui')['NDivider']
NDrawer: typeof import('naive-ui')['NDrawer'] NDrawer: typeof import('naive-ui')['NDrawer']
NDrawerContent: typeof import('naive-ui')['NDrawerContent'] NDrawerContent: typeof import('naive-ui')['NDrawerContent']
NDropdown: typeof import('naive-ui')['NDropdown'] NDropdown: typeof import('naive-ui')['NDropdown']
NEmpty: typeof import('naive-ui')['NEmpty'] NEmpty: typeof import('naive-ui')['NEmpty']
NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem']
NGradientText: typeof import('naive-ui')['NGradientText'] NGradientText: typeof import('naive-ui')['NGradientText']
NGrid: typeof import('naive-ui')['NGrid'] NGrid: typeof import('naive-ui')['NGrid']
NGridItem: typeof import('naive-ui')['NGridItem'] NGridItem: typeof import('naive-ui')['NGridItem']
NInput: typeof import('naive-ui')['NInput'] NInput: typeof import('naive-ui')['NInput']
NInputGroup: typeof import('naive-ui')['NInputGroup']
NInputNumber: typeof import('naive-ui')['NInputNumber'] NInputNumber: typeof import('naive-ui')['NInputNumber']
NList: typeof import('naive-ui')['NList']
NListItem: typeof import('naive-ui')['NListItem']
NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider'] NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
NMenu: typeof import('naive-ui')['NMenu'] NMenu: typeof import('naive-ui')['NMenu']
NMessageProvider: typeof import('naive-ui')['NMessageProvider'] NMessageProvider: typeof import('naive-ui')['NMessageProvider']
NModal: typeof import('naive-ui')['NModal'] NModal: typeof import('naive-ui')['NModal']
NNotificationProvider: typeof import('naive-ui')['NNotificationProvider'] NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
NPopover: typeof import('naive-ui')['NPopover']
NScrollbar: typeof import('naive-ui')['NScrollbar'] NScrollbar: typeof import('naive-ui')['NScrollbar']
NSelect: typeof import('naive-ui')['NSelect'] NSelect: typeof import('naive-ui')['NSelect']
NSpace: typeof import('naive-ui')['NSpace'] NSpace: typeof import('naive-ui')['NSpace']
NSpin: typeof import('naive-ui')['NSpin']
NStatistic: typeof import('naive-ui')['NStatistic']
NSwitch: typeof import('naive-ui')['NSwitch'] NSwitch: typeof import('naive-ui')['NSwitch']
NTabPane: typeof import('naive-ui')['NTabPane'] NTabPane: typeof import('naive-ui')['NTabPane']
NTabs: typeof import('naive-ui')['NTabs'] NTabs: typeof import('naive-ui')['NTabs']
NTag: typeof import('naive-ui')['NTag']
NThing: typeof import('naive-ui')['NThing']
NTimeline: typeof import('naive-ui')['NTimeline']
NTimelineItem: typeof import('naive-ui')['NTimelineItem']
NTooltip: typeof import('naive-ui')['NTooltip'] NTooltip: typeof import('naive-ui')['NTooltip']
SystemLogo: typeof import('./src/components/common/SystemLogo.vue')['default'] SystemLogo: typeof import('./src/components/common/SystemLogo.vue')['default']
WebSiteLink: typeof import('./src/components/custom/WebSiteLink.vue')['default'] WebSiteLink: typeof import('./src/components/custom/WebSiteLink.vue')['default']

View File

@ -9,7 +9,7 @@
:closable="item.path !== tab.homeTab.path" :closable="item.path !== tab.homeTab.path"
:dark-mode="theme.darkMode" :dark-mode="theme.darkMode"
:class="{ '!mr-0': isChromeMode && index === tab.tabs.length - 1, 'mr-10px': !isChromeMode }" :class="{ '!mr-0': isChromeMode && index === tab.tabs.length - 1, 'mr-10px': !isChromeMode }"
@click="tab.handleClickTab(item.path)" @click="tab.handleClickTab(item)"
@close="tab.removeTab(item.path)" @close="tab.removeTab(item.path)"
@contextmenu="handleContextMenu($event, item.path)" @contextmenu="handleContextMenu($event, item.path)"
> >

View File

@ -9,6 +9,7 @@ export function getTabRouteByVueRoute(route: RouteRecordNormalized | RouteLocati
name: route.name, name: route.name,
path: route.path, path: route.path,
meta: route.meta, meta: route.meta,
fullPath: (<RouteLocationNormalizedLoaded>route).fullPath,
scrollPosition: { scrollPosition: {
left: 0, left: 0,
top: 0 top: 0

View File

@ -20,6 +20,7 @@ export const useTabStore = defineStore('tab-store', {
homeTab: { homeTab: {
name: 'root', name: 'root',
path: '/', path: '/',
fullPath: '/',
meta: { meta: {
title: 'root' title: 'root'
}, },
@ -124,15 +125,15 @@ export const useTabStore = defineStore('tab-store', {
}, },
/** /**
* tab * tab
* @param path - path * @param route - route
*/ */
handleClickTab(path: string) { handleClickTab(route: GlobalTabRoute) {
const { routerPush } = useRouterPush(false); const { routerPush } = useRouterPush(false);
const isActive = this.activeTab === path; const isActive = this.activeTab === route.path;
if (!isActive) { if (!isActive) {
this.setActiveTab(path); this.setActiveTab(route.path);
routerPush(path); routerPush(route.fullPath || route.path);
} }
}, },
/** /**
@ -164,7 +165,6 @@ export const useTabStore = defineStore('tab-store', {
/** 初始化Tab状态 */ /** 初始化Tab状态 */
iniTabStore(currentRoute: RouteLocationNormalizedLoaded) { iniTabStore(currentRoute: RouteLocationNormalizedLoaded) {
const theme = useThemeStore(); const theme = useThemeStore();
const isHome = currentRoute.path === this.homeTab.path; const isHome = currentRoute.path === this.homeTab.path;
const tabs: GlobalTabRoute[] = theme.tab.isCache ? getTabRoutes() : []; const tabs: GlobalTabRoute[] = theme.tab.isCache ? getTabRoutes() : [];
const hasHome = isInTabRoutes(tabs, this.homeTab.path); const hasHome = isInTabRoutes(tabs, this.homeTab.path);

View File

@ -262,7 +262,8 @@ type GlobalBreadcrumb = import('naive-ui').DropdownOption & {
}; };
/** 多页签Tab的路由 */ /** 多页签Tab的路由 */
interface GlobalTabRoute extends Pick<import('vue-router').RouteLocationNormalizedLoaded, 'name' | 'path' | 'meta'> { interface GlobalTabRoute
extends Pick<import('vue-router').RouteLocationNormalizedLoaded, 'name' | 'path' | 'meta' | 'fullPath'> {
/** 滚动的位置 */ /** 滚动的位置 */
scrollPosition: { scrollPosition: {
left: number; left: number;