当前位置：首页 > news >正文

前端各大框架路由跳转

news 来源：原创 2025/6/25 15:22:31

1、uniapp

export const useRouter = (): { push: Function, replace: Function, back: Function, authRouter: Function, route: Function } => {
    type routeQuery = {
        path: string,
        query?: {
            [key: string]: string | number | undefined
        }
    }
    const push = ({ path, query }: routeQuery): void => {
        uni.navigateTo({ url: `${path}?${handle(query)}` })
    }
    const replace = ({ path, query }: routeQuery): void => {
        uni.redirectTo({ url: `${path}?${handle(query)}` })
    }
    const back = (index?: number): void => {
        const pages = getCurrentPages();
        if (pages.length > 1) {
            uni.navigateBack({ delta: index ? index : 1 })
        } else {
            uni.navigateTo({ url: '/takeStock/index/index' })
        }
    }
    const addressBack = (index?: number): void => {
        const pages = getCurrentPages();
        if (pages.length > 1) {
            uni.navigateBack({ delta: index ? index : 1 })
        } else {
            uni.navigateTo({ url: '/addressBook/index/index' })
        }
    }
    const handle = (query?: { [key: string]: string | number | undefined }): string => {
        let queryString = '';
        if (query) {
            Object.keys(query).forEach((item, index) => {
                queryString += `${item}=${query[item] || ''}&`
            })
        }
        queryString = queryString.slice(0, queryString.length - 1);
        return queryString
    }
    const route = () => {
        const page = getCurrentPages();
        return page[page.length - 1].options
    }
    const authRouter = () => {
        const page = getCurrentPages();
        if (!uni.getStorageSync("takeStockToken")) {
            uni.setStorageSync('pathRouter', {
                path: "/" + page[page.length - 1].route,
                query: page[page.length - 1].options
            });
            uni.redirectTo({ url: "/takeStock/login/index" })
        }
    }
    return { push, replace, back, authRouter, route }
}

2、Taro

export const useRouter = (): { push: Function, replace: Function, back: Function } => {
    type routeQuery = {
        path: string,
        query?: {
            [key: string]: string | number | undefined
        }
    }
    const push = ({ path, query }: routeQuery): void => {
        Taro.navigateTo({ url: `${path}?${handle(query)}` })
    }
    const replace = ({ path, query }: routeQuery): void => {
        Taro.redirectTo({ url: `${path}?${handle(query)}` })
    }
    const back = (index?: number): void => {
        const pages = getCurrentPages();
        if (pages.length > 1) {
            Taro.navigateBack({ delta: index ? index : 1 })
        } else {
            Taro.navigateTo({ url: '/pages/login/index' })
        }
    }
    const handle = (query?: { [key: string]: string | number | undefined }): string => {
        let queryString = '';
        if (query) {
            Object.keys(query).forEach((item) => {
                queryString += `${item}=${query[item] || ''}&`
            })
        }
        queryString = queryString.slice(0, queryString.length - 1);
        return queryString
    }
    // const route = () => {
    //     const page = getCurrentPages();
    //     return page[page.length - 1].options
    // }
    return { push, replace, back  }
}

3、react

const useRouter = () => {
    const navigate = useNavigate();
    type routeQuery = {
        path?: string,
        query?: {
            [key: string]: string | number | undefined
        }
    }
    // 前进
    const push = ({ path, query }: routeQuery) => {
        navigate(`${path}?${handle(query)}`)
    }
    const pushPath = (path: string) => {
        navigate(`${path}`)
    }
    // 替换
    const replace = ({ path, query }: routeQuery) => {
        navigate(`${path}?${handle(query)}`, { replace: true })
    }
    // 返回
    const back = (index?: number) => {
        history.go(Number(`-${index ? index : 1}`))
    }
    // 拼接参数
    const handle = (query?: { [key: string]: string | number | undefined }): string => {
        let queryString = '';
        if (query) {
            Object.keys(query).forEach((item, index) => {
                queryString += `${item}=${query[item] || ''}&`
            })
        }
        queryString = queryString.slice(0, queryString.length - 1);
        return queryString
    }
    return { push, replace, back, pushPath }
}
export default useRouter;

获取参数：

//?id=123
const params = new URLSearchParams(useLocation().search);
params.get("id")


import { useSearchParams } from "react-router-dom";
const [searchParams] = useSearchParams();
searchParams.get('id')




//:id
import { useParams } from 'react-router-dom';
const params = useParams() as { id: string };
params.id

4、vue

import { Modal } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";


const router = useRouter();
const route = useRoute();
router.push({
    path: "/workPortal/myProcess/details/" + row.id,
    query: {
      routeTitle: row.processName.split('-')[0] + " - " + row.sourceId
    }
  });


route.params.id
route.query.id

5、nextjs

import { useRouter } from 'next/navigation'
const router = useRouter();
router.push("/from/records/detail?id=" + row.sysId)





//?id=123
import { useSearchParams } from 'next/navigation'
const searchParams = useSearchParams();
searchParams.get("id")







//:id
import { useParams } from 'next/navigation'
const params = useParams();
params.id

6、umi

import { history } from "@umijs/max"

const useRouter = () => {
    type routeQuery = {
        path?: string,
        query?: {
            [key: string]: string | number | undefined
        }
    }
    // 前进
    const push = ({ path, query }: routeQuery) => {
        history.push(`${path}?${handle(query)}`)
    }
    const pushPath = (path: string) => {
        history.push(`${path}`)
    }
    // 替换
    const replace = ({ path, query }: routeQuery) => {
        history.replace(`${path}?${handle(query)}`, { replace: true })
    }
    // 返回
    const back = (index?: number) => {
        history.go(Number(`-${index ? index : 1}`))
    }
    // 拼接参数
    const handle = (query?: { [key: string]: string | number | undefined }): string => {
        let queryString = '';
        if (query) {
            Object.keys(query).forEach((item, index) => {
                queryString += `${item}=${query[item] || ''}&`
            })
        }
        queryString = queryString.slice(0, queryString.length - 1);
        return queryString
    }
    return { push, replace, back, pushPath }
}
export default useRouter;