实时视图-返回上一级丢失查询参数问题

src/router/index.ts

@@ -1,47 +1,48 @@
-import { createRouter, createWebHashHistory, Router } from "vue-router";
-import Layout from "@/layout";
-import { RouterTy } from "~/router";
-import routesOne from "./routes/routes-file-one";
-import routesTwo from "./routes/routes-file-two";
-import routesThree from "./routes/routes-file-three";
-import routesFour from "./routes/routes-file-four";
-import routesFive from "./routes/routes-file-five";
-import routesSix from "./routes/routes-file-six";
+import { createRouter, createWebHashHistory, Router } from 'vue-router'
+import Layout from '@/layout'
+import { RouterTy } from '~/router'
+import routesOne from './routes/routes-file-one'
+import routesTwo from './routes/routes-file-two'
+import routesThree from './routes/routes-file-three'
+import routesFour from './routes/routes-file-four'
+import routesFive from './routes/routes-file-five'
+import routesSix from './routes/routes-file-six'
+import { Page, useKeepAlive } from '@/store/keepAlive'
 const routesPush = (arr, routes) => {
-  if (!Array.isArray(arr)) return "请传入数组格式路由表";
+  if (!Array.isArray(arr)) return '请传入数组格式路由表'
   for (let i = 0; i < arr.length; i++) {
-    routes.push(arr[i]);
+    routes.push(arr[i])
   }
-};
+}
 
 export const constantRoutes: RouterTy = [
   {
-    path: "/redirect",
+    path: '/redirect',
     component: Layout,
     hidden: true,
     children: [
       {
-        path: "/redirect/:path(.*)",
-        component: () => import("@/views/redirect"),
+        path: '/redirect/:path(.*)',
+        component: () => import('@/views/redirect'),
       },
     ],
   },
   {
-    path: "/login",
-    component: () => import("@/views/login/Login.vue"),
+    path: '/login',
+    component: () => import('@/views/login/Login.vue'),
     hidden: true,
   },
   {
-    path: "/404",
-    component: () => import("@/views/error-page/404.vue"),
+    path: '/404',
+    component: () => import('@/views/error-page/404.vue'),
     hidden: true,
   },
   {
-    path: "/401",
-    component: () => import("@/views/error-page/401.vue"),
+    path: '/401',
+    component: () => import('@/views/error-page/401.vue'),
     hidden: true,
   },
-];
+]
 /**
  * asyncRoutes
  * the routes that need to be dynamically loaded based on user roles
@@ -49,8 +50,8 @@ export const constantRoutes: RouterTy = [
 export const asyncRoutes: RouterTy = [
   // 404 page must be placed at the end !!!
   // using pathMatch install of "*" in vue-router 4.0
-  { path: "/:pathMatch(.*)", redirect: "/404", hidden: true },
-];
+  { path: '/:pathMatch(.*)', redirect: '/404', hidden: true },
+]
 
 // 插入路由
 routesPush(
@@ -63,13 +64,41 @@ routesPush(
     ...routesFour,
   ],
   asyncRoutes
-);
+)
 
 const router: Router = createRouter({
   history: createWebHashHistory(),
   scrollBehavior: () => ({ top: 0 }),
   routes: constantRoutes,
-});
+})
+
+router.beforeEach((to, from, next) => {
+  const { savedPages, savePage } = useKeepAlive()
+
+  if (
+    typeof from.name === 'string' &&
+    ((from.name.includes('FlightView') &&
+      from.query.flightNO &&
+      from.query.flightDate) ||
+      (from.name.includes('WaybillView') && from.query.waybillNO))
+  ) {
+    savePage(from as Page)
+  }
+
+  if (
+    typeof to.name === 'string' &&
+    ((to.name.includes('FlightView') &&
+      (!to.query.flightNO || !to.query.flightDate)) ||
+      (to.name.includes('WaybillView') && !to.query.waybillNO))
+  ) {
+    const savedPage = savedPages.find(savedPage => savedPage.name === to.name)
+    if (savedPage) {
+      next(savedPage.fullPath)
+    }
+  }
+
+  next()
+})
 
 // export function resetRouter() {
 //   const newRouter = createRouter({
@@ -79,4 +108,4 @@ const router: Router = createRouter({
 //   })
 // }
 
-export default router;
+export default router

src/store/keepAlive.ts

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+import { LocationQuery } from 'vue-router'
+
+export type Page = {
+  name: string
+  fullPath: string
+}
+
+export const useKeepAlive = defineStore('keepAlive', () => {
+  const savedPages = ref<Page[]>(
+    JSON.parse(sessionStorage.getItem('savedPages') ?? '[]')
+  )
+
+  const savePage = ({ name, fullPath }: Page) => {
+    const index = savedPages.value.findIndex(
+      savedPage => savedPage.name === name
+    )
+    if (index > -1) {
+      savedPages.value[index] = { name, fullPath }
+    } else {
+      savedPages.value.push({ name, fullPath })
+    }
+    sessionStorage.setItem('savedPages', JSON.stringify(savedPages.value))
+  }
+
+  return {
+    savedPages,
+    savePage,
+  }
+})