feat: 菜单不跳转新页面

src/components/common/CommonHeader.vue

@@ -139,7 +139,7 @@
 import type { HeaderMenuItem } from '@/types/common.ts';
 import { useLoginModal } from '@/components/login/login.ts';
 import { useAppStore } from '@/stores/app.ts';
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, watch } from 'vue';
 import { useJump } from '@/composable/useJump.ts';
 import { RouteName } from '@/router/router.ts';
 import { useRoute } from 'vue-router';
@@ -147,6 +147,7 @@ import { useRoute } from 'vue-router';
 import { useCity } from '@/composable/useCity.ts';
 import type { DropdownInstance } from 'element-plus';
 import type { RouteLocationRaw } from 'vue-router';
+import { useSearchParamsStore } from '@/stores/searchParams.ts';
 
 const props = withDefaults(
   defineProps<{
@@ -159,6 +160,7 @@ const props = withDefaults(
 const appStore = useAppStore();
 const { router, open: openPage } = useJump();
 const route = useRoute();
+const searchParamsStore = useSearchParamsStore();
 
 const userInfo = computed(() => {
   return appStore.userInfo;
@@ -249,19 +251,27 @@ const changeCityStatus = (status: number) => {
   }
 };
 
+/** 用于搜索条件的省名 */
+const cityInFilter = computed(() => {
+  return provinceList.find((item) => {
+    return item.name.replace(/\s+/g, '').indexOf(currentCity.value) > -1;
+  });
+});
+
+watch(cityInFilter, (val) => {
+  searchParamsStore.changeGlobalProvinceName(val?.name || '');
+});
+
 const handleCityClick = (cityName: string) => {
   currentCity.value = cityName;
-  const cityInFilter = provinceList.filter((item) => {
-    return item.name.replace(/\s+/g, '').indexOf(cityName) > -1;
-  });
   const jump = (params: RouteLocationRaw) => {
     router.replace(params);
   };
-  if (cityInFilter.length) {
+  if (cityInFilter.value) {
     jump({
       name: route.name!,
       query: {
-        city: cityInFilter[0].name,
+        city: cityInFilter.value.name,
         c: cityName,
       },
     });
@@ -291,14 +301,20 @@ const handleLogout = () => {
 };
 
 const handleMenuChange = (menu: HeaderMenuItem) => {
-  const { city } = route.query;
-  const searchParams = city ? JSON.stringify({ provinceName: city }) : undefined;
-  openPage({
-    path: menu.path,
-    query: {
-      searchParams,
+  const menuRoute = router.resolve(menu.path);
+  const searchParams =
+    cityInFilter.value && menuRoute.name !== RouteName.home
+      ? JSON.stringify({ provinceName: cityInFilter.value.name })
+      : undefined;
+  openPage(
+    {
+      path: menu.path,
+      query: {
+        searchParams,
+      },
     },
-  });
+    menuRoute.name === RouteName.industryCategory,
+  );
 };
 </script>
 <style lang="scss" scoped>

src/stores/searchParams.ts

 import { defineStore } from 'pinia';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import { isEmpty } from 'lodash-es';
 
 /**
  * 搜索参数
@@ -14,6 +15,18 @@ export const useSearchParamsStore = defineStore('searchParams', () => {
   /** url传递的搜索参数 */
   const urlSearchParams = ref(routeSearchParams.value);
   const searchName = ref(urlSearchParams.value.name || '');
+  /** 首页选择省名 */
+  const globalProvinceName = ref('');
+
+  watch(
+    () => routeSearchParams.value,
+    (val) => {
+      if (!isEmpty(val)) {
+        urlSearchParams.value = val;
+        searchName.value = val?.name || '';
+      }
+    },
+  );
 
   const changeSearchName = (name: string) => {
     searchName.value = name;
@@ -23,10 +36,16 @@ export const useSearchParamsStore = defineStore('searchParams', () => {
     urlSearchParams.value = {};
   };
 
+  const changeGlobalProvinceName = (name: string) => {
+    globalProvinceName.value = name;
+  };
+
   return {
     urlSearchParams,
     searchName,
+    globalProvinceName,
     changeSearchName,
+    changeGlobalProvinceName,
     clearUrlSearchParams,
   };
 });

src/views/home/HomeView.vue

@@ -203,10 +203,11 @@ import ParkItem from '@/components/list/ParkItem.vue';
 import { RouteName } from '@/router/router.ts';
 import { useJump } from '@/composable/useJump.ts';
 import { ParkItemType } from '@/types/enum.ts';
-import { useRoute } from 'vue-router';
 import { isEmpty } from 'lodash-es';
+import { useSearchParamsStore } from '@/stores/searchParams.ts';
 
 const { open } = useJump();
+const searchParamsStore = useSearchParamsStore();
 const activeTab = ref<string>('develop');
 const activeDataList = ref<any[]>([]);
 const changeTab = (tabName: string, dataList: any[] = []) => {
@@ -234,11 +235,9 @@ type PageData = {
 };
 const homePageData = ref<PageData>();
 
-const route = useRoute();
-
 /** 选中的区域 */
 const selectedCity = computed(() => {
-  return route.query.city;
+  return searchParamsStore.globalProvinceName;
 });
 
 const toList = () => {

src/views/user/MyIndustrialDetail.vue

@@ -506,5 +506,5 @@ const handleBack = () => {
   });
 };
 
-initDetail()
+initDetail();
 </script>