THJ_Mobile/src/hooks/navigation/index.ts

import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import animateRouter from '@mobile/router/animateRouter'

export function useNavigation() {
    const route = useRoute()
    const router = useRouter()

    // 缓存全局Url参数
    const setGlobalUrlParams = <T extends object>(params?: T) => {
        sessionStorage.setItem('globalUrlParams', JSON.stringify(params ?? {}))
    }

    // 是否有历史页面
    const hasHistory = () => {
        const state = animateRouter.getState()
        return state.historyRoutes.length > 1
    }

    // 获取全局Url参数(只能获取一次)
    const getGlobalUrlParams = () => {
        const params = sessionStorage.getItem('globalUrlParams')
        if (params) {
            sessionStorage.removeItem('globalUrlParams')
            return JSON.parse(params)
        } else {
            return {}
        }
    }

    // 获取参数字符串
    const getParamString = (name: string) => {
        return route.params[name] ?? ''
    }

    // 获取查询字符串
    const getQueryString = (name: string) => {
        const qs = route.query[name]
        if (qs) {
            return qs.toString()
        }
        return ''
    }

    const getQueryStringToNumber = (name: string) => {
        const reg = /^[0-9]+.?[0-9]*/
        const value = getQueryString(name)
        return reg.test(value) ? Number(value) : 0
    }

    // 返回指定页面
    // const backTo = <T extends object>(name: string, params?: T) => {
    //     const { state } = animateRouter
    //     const total = state.history.length - 1
    //     const index = state.history.findIndex(((e) => e.name === name))

    //     if (total > -1) {
    //         if (index > -1) {
    //             setGlobalUrlParams(params)
    //             const delta = total - index
    //             if (delta > 0) {
    //                 router.go(-delta)
    //             } else {
    //                 router.replace({ name })
    //             }
    //         }
    //     } else {
    //         router.replace({ name })
    //     }
    // }

    // 返回主页
    const backHome = () => {
        const state = animateRouter.getState()
        const delta = state.historyRoutes.length - 1
        const params = { tabIndex: 0 }

        if (delta) {
            setGlobalUrlParams(params)
            router.go(-delta)
        } else {
            const page = state.historyRoutes[0]
            if (page?.name !== 'home-index') {
                setGlobalUrlParams(params)
                router.replace({ name: 'home-index' })
            }
        }
    }

    // 返回上个页面
    const routerBack = <T extends object>(params?: T) => {
        setGlobalUrlParams(params)
        router.back()
    }

    // 路由跳转
    const routerTo = (name: string, replace = false) => {
        if (replace) {
            router.replace({ name })
        } else {
            router.push({ name })
        }
    }

    // 路由守卫
    const beforeRouteLeave = (callback: () => boolean) => {
        onBeforeRouteLeave((to, from, next) => {
            if (callback()) {
                next()
            } else {
                next(false)
            }
        })
    }

    return {
        route,
        router,
        hasHistory,
        setGlobalUrlParams,
        getGlobalUrlParams,
        getParamString,
        getQueryString,
        getQueryStringToNumber,
        backHome,
        routerBack,
        routerTo,
        beforeRouteLeave,
    }
}