diff --git a/src/store/menu.ts b/src/store/menu.ts index a562d28e..645471f8 100644 --- a/src/store/menu.ts +++ b/src/store/menu.ts @@ -39,10 +39,7 @@ type MenuStateType = { } } siderMenus: MenuItem[] - params: { - key: string - params: Record - } + params: Record } @@ -50,10 +47,7 @@ export const useMenuStore = defineStore({ id: 'menu', state: (): MenuStateType => ({ menus: {}, - params: { - key: '', - params: {} - }, + params: {}, siderMenus: [] }), getters: { @@ -85,6 +79,7 @@ export const useMenuStore = defineStore({ jumpPage(name: string, params?: Record, query?: Record) { const path = this.hasMenu(name) if (path) { + this.params = { [name]: params || {}} router.push({ name, params, query, state: { params } }) diff --git a/src/utils/hooks/useParams.ts b/src/utils/hooks/useParams.ts new file mode 100644 index 00000000..c9629fc8 --- /dev/null +++ b/src/utils/hooks/useParams.ts @@ -0,0 +1,24 @@ +import {useMenuStore} from "store/menu"; +import { onBeforeUnmount } from 'vue' + +export const useRouterParams = () => { + const params = ref>({}) + const menu = useMenuStore(); + + const router = useRouter(); + const routeName = router.currentRoute.value.name as string + + watchEffect(() => { + params.value = routeName && menu.params[routeName] ? menu.params[routeName] : {} + }) + + onBeforeUnmount(() => { + if (routeName && menu.params[routeName]) { // 如果当前路由params参数,离开页面清除掉 + menu.params = {} + } + }) + + return { + params + } +} \ No newline at end of file diff --git a/src/views/device/Instance/Detail/index.vue b/src/views/device/Instance/Detail/index.vue index b719c409..b03f9e92 100644 --- a/src/views/device/Instance/Detail/index.vue +++ b/src/views/device/Instance/Detail/index.vue @@ -119,10 +119,12 @@ import { message } from 'jetlinks-ui-components'; import { getImage } from '@/utils/comm'; import { getWebSocket } from '@/utils/websocket'; import { useMenuStore } from '@/store/menu'; +import {useRouterParams} from "@/utils/hooks/useParams"; const menuStory = useMenuStore(); const route = useRoute(); +const routerParams = useRouterParams() const instanceStore = useInstanceStore(); const statusMap = new Map(); @@ -267,15 +269,14 @@ const getDetailFn = async () => { await instanceStore.refresh(String(_id)); getStatus(String(_id)); list.value = [...initList]; - console.log('watch', route.params?.id) getDetail(); - instanceStore.tabActiveKey = history.state?.params?.tab || 'Info'; + instanceStore.tabActiveKey = routerParams.params.value.tab || 'Info'; } } onMounted(() => { getDetailFn() - instanceStore.tabActiveKey = history.state?.params?.tab || 'Info'; + instanceStore.tabActiveKey = routerParams.params.value.tab || 'Info'; }); const onBack = () => { diff --git a/src/views/device/Instance/index.vue b/src/views/device/Instance/index.vue index 2d3b82b7..840c3235 100644 --- a/src/views/device/Instance/index.vue +++ b/src/views/device/Instance/index.vue @@ -308,6 +308,7 @@ import dayjs from 'dayjs'; import BadgeStatus from '@/components/BadgeStatus/index.vue'; import BatchDropdown from '@/components/BatchDropdown/index.vue'; import { BatchActionsType } from '@/components/BatchDropdown/types'; +import {useRouterParams} from "@/utils/hooks/useParams"; const instanceRef = ref>({}); const params = ref>({}); @@ -320,7 +321,7 @@ const operationVisible = ref(false); const api = ref(''); const type = ref(''); const isCheck = ref(false); - +const routerParams = useRouterParams() const menuStory = useMenuStore(); const columns = [ @@ -546,7 +547,7 @@ const paramsFormat = ( }; onMounted(() => { - if (history.state?.params?.type === 'add') { + if (routerParams.params.value.type === 'add') { handleAdd(); } }); diff --git a/src/views/device/Product/Detail/index.vue b/src/views/device/Product/Detail/index.vue index 4b1a3fa9..ea852be2 100644 --- a/src/views/device/Product/Detail/index.vue +++ b/src/views/device/Product/Detail/index.vue @@ -114,11 +114,13 @@ import { message } from 'jetlinks-ui-components'; import { getImage, handleParamsToString } from '@/utils/comm' import encodeQuery from '@/utils/encodeQuery'; import { useMenuStore } from '@/store/menu'; +import {useRouterParams} from "@/utils/hooks/useParams"; const menuStory = useMenuStore(); const route = useRoute(); const checked = ref(true); const productStore = useProductStore(); +const routerParams = useRouterParams() const searchParams = ref({ terms1: [ { @@ -291,8 +293,8 @@ const jumpDevice = () => { ); }; onMounted(() => { - if (history.state?.params?.tab) { - productStore.tabActiveKey = history.state?.params?.tab; + if (routerParams.params?.value.tab) { + productStore.tabActiveKey = routerParams.params?.value.tab; } }); diff --git a/src/views/device/Product/index.vue b/src/views/device/Product/index.vue index 6221603b..c7789a97 100644 --- a/src/views/device/Product/index.vue +++ b/src/views/device/Product/index.vue @@ -181,6 +181,7 @@ import { typeOptions } from '@/components/Search/util'; import Save from './Save/index.vue'; import { useMenuStore } from 'store/menu'; import { useRoute } from 'vue-router'; +import {useRouterParams} from "@/utils/hooks/useParams"; /** * 表格数据 */ @@ -616,9 +617,9 @@ const saveRef = ref(); const handleSearch = (e: any) => { params.value = e; }; -const route = useRoute(); +const routerParams = useRouterParams() onMounted(() => { - if(history.state?.params?.save){ + if(routerParams.params?.value.save){ add(); } }); diff --git a/src/views/edge/Device/Remote/index.vue b/src/views/edge/Device/Remote/index.vue index 9e306a2a..6080be00 100644 --- a/src/views/edge/Device/Remote/index.vue +++ b/src/views/edge/Device/Remote/index.vue @@ -8,12 +8,13 @@