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

View File

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