feat: tabs-router 支持存储路由的query,保证切换tab时,能保留页面参数 (#269)

* feat: tabs-router 支持存储路由的query,保证切换tab时,能保留页面参数

* fix: 设置 TRouterInfo.query 可空 可为null
This commit is contained in:
dodu2014 2022-08-12 18:47:52 +08:00 committed by GitHub
parent 0c6ae6a286
commit 14a345c5d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 8 deletions

View File

@ -63,10 +63,11 @@ export default defineComponent({
const appendNewRoute = () => { const appendNewRoute = () => {
const { const {
path, path,
query,
meta: { title }, meta: { title },
name, name,
} = route; } = route;
tabsRouterStore.appendTabRouterList({ path, title: title as string, name, isAlive: true }); tabsRouterStore.appendTabRouterList({ path, query, title: title as string, name, isAlive: true });
}; };
const getTabRouterListCache = () => { const getTabRouterListCache = () => {
@ -105,17 +106,19 @@ export default defineComponent({
tabsRouterStore.subtractCurrentTabRouter({ path, routeIdx: index }); tabsRouterStore.subtractCurrentTabRouter({ path, routeIdx: index });
if (path === route.path) { if (path === route.path) {
router.push(nextRouter.path); router.push({ path: nextRouter.path, query: nextRouter.query });
} }
}; };
const handleChangeCurrentTab = (path: string) => { const handleChangeCurrentTab = (path: string) => {
router.push(path); const { tabRouters } = tabsRouterStore;
const route = tabRouters.find((i) => i.path === path);
router.push({ path, query: route.query });
}; };
const handleRefresh = (currentPath: string, routeIdx: number) => { const handleRefresh = (route: TRouterInfo) => {
tabsRouterStore.toggleTabRouterAlive(routeIdx); tabsRouterStore.toggleTabRouterAlive(route.routeIdx);
nextTick(() => { nextTick(() => {
tabsRouterStore.toggleTabRouterAlive(routeIdx); tabsRouterStore.toggleTabRouterAlive(route.routeIdx);
router.replace({ path: currentPath }); router.replace({ path: route.path, query: route.query });
}); });
}; };
const handleCloseAhead = (path: string, routeIdx: number) => { const handleCloseAhead = (path: string, routeIdx: number) => {
@ -195,7 +198,7 @@ export default defineComponent({
dropdown: () => dropdown: () =>
router.path === route.path ? ( router.path === route.path ? (
<t-dropdown-menu> <t-dropdown-menu>
<t-dropdown-item onClick={() => handleRefresh(router.path, idx)}> <t-dropdown-item onClick={() => handleRefresh(router)}>
<t-icon name="refresh" /> <t-icon name="refresh" />
</t-dropdown-item> </t-dropdown-item>

View File

@ -36,6 +36,7 @@ export interface NotificationItem {
export interface TRouterInfo { export interface TRouterInfo {
path: string; path: string;
query?: LocationQueryRaw;
routeIdx?: number; routeIdx?: number;
title?: string; title?: string;
name?: RouteRecordName; name?: RouteRecordName;