search-hash-params-router

使用 location.search 和 location.hash 和location.pathname中查询参数的前端路由器,

支持在 react17 和 vue3 中使用.

不需要"Path-to-RegExp"了

为路由器添加查询参数模式。基于历史记录模式。使用查询参数匹配而不是动态路由匹配。

使用 URLSearchParams和btoa和atob进行序列化和反序列化

此功能解决了什么问题？

使用查询参数模式不需要服务器设置路由回退。

我们可以使用路由的 history 模式，充分利用 history.pushState API，无需重新加载页面即可完成 URL 跳转。

当您使用历史模式时，该 URL 就像一个普通的 url。

我在使用历史模式时遇到了以下问题。

但是，要使用此模式，您需要配置后台支持。

如果后台没有配置好，当用户直接在浏览器中访问时，会返回 404。

我个人不喜欢动态路由匹配模式，我喜欢查询参数匹配模式。

例如:

search-router:

{ "foo": "bar", "baz": "12321" }

https://nodejs.org/en/?YmF6PTEyMzIxJmZvbz1iYXI=

hash-router

{ "view": "home", "op": "translate" }

https://translate.google.cn/#b3A9dHJhbnNsYXRlJnZpZXc9aG9tZQ==

path-router:

{ "foo": "bar", "baz": "12345" }

https://nodejs.org/en/YmF6PTEyMzQ1JmZvbz1iYXI=

在线演示

https://search-hash-params-router-vue.vercel.app/

https://search-hash-params-router-react.vercel.app/

安装

pnpm  add @masx200/search-hash-params-router

提议的 API 是什么样的？

Typescript 类型声明文件:

https://gitee.com/masx200/search-hash-params-router/blob/master/src/index.ts

查询参数可以从location.search 或location.hash 和location.pathname中获取。

可以通过以下方式修改查询参数。

通用例子:

导入模块

import {
    createHashRouter,
    createSearchRouter,
    createPathRouter,
    serializeParams,
    deserializeParams,
} from "@masx200/search-hash-params-router";

序列化参数对象

let string = serializeParams({ foo: "bar", baz: "12321" });

反序列化参数字符串

let object = deserializeParams("YmF6PTEyMzIxJmZvbz1iYXI=");

创建路由器：

const hashrouter = createHashRouter();

const searchrouter = createSearchRouter();

const pathrouter = createPathRouter();

编程式导航:

searchrouter.setparams({ qqqqq: Math.random().toString() });
searchrouter.transformparams((o) => {
    return {
        ...o,
        qqqqq: Math.random().toString(),
    };
});

获取当前路由参数对象

console.log(searchrouter.getparams());

如果没有使用`createVueView`或`createReactView`,

那么需要在使用前使用挂载

searchrouter.mount();

需要在不使用时使用卸载

searchrouter.unmount();

监听路由参数的变化事件，监听路由匹配切换的变化：

searchrouter.on("params", (p) => {
    console.log(p);
});

根据参数获取新链接路径

let newhref = searchrouter.gethref((o) => {
    return { ...o, qqqqq: Math.random().toString() };
});

let newhref = searchrouter.gethref(( {qqqqq: Math.random().toString() })

创建路由条目：

const routes = [
    {
        component: Home,

        params(o: any) {
            return Object.keys(o).length === 0;
        },
    },
    {
        component: Home,

        params(o: any) {
            return o.p === "home";
        },
    },
    {
        component: App,

        params(o: any) {
            return o.p === "app";
        },
    },
    {
        component: Foo,

        params(o: any) {
            return o.foo === "foo1";
        },
    },
    {
        component: Bar,

        params(o: any) {
            return o.bar === "bar1";
        },
    },
    {
        params(o: any) {
            return "redirect" == o.p;
        },
        redirect: { p: "home" },
    },
    {
        component: NotFound,

        params() {
            return true;
        },
    },
];

例子:在 Vue 中使用

https://github.com/masx200/search-hash-params-router/tree/master/example/vue/my-vue-app

导入模块：

import {
    createVueParamsHook,
    createHashRouter,
    createSearchRouter,
    createVueView,
    createVueLink,
} from "@masx200/search-hash-params-router";

创建路由视图组件：

const View = createVueView({
    readonly,
    onMounted,
    onUnmounted,
    router: hashrouter,
    resolveComponent,
    defineComponent,
    h,
    ref,
});

创建路由链接组件：

const Link = createVueLink({
    router: hashrouter,
    ref,
    onMounted,
    onUnmounted,
    readonly,
    resolveComponent,
    defineComponent,
    h,
});

创建路由参数 Hook:

const useParams = createVueParamsHook({
    router: hashrouter,
    ref,
    readonly,
    onMounted,
    onUnmounted,
});

在任意组件中获取当前的路由参数:

<template>
    <div>params:{{ JSON.stringify(params) }}</div>
</template>
<script lang="ts">
export default defineComponent({
    setup() {
        const params = useParams();
        watch(
            () => params.value,
            (params) => {
                console.log(params);
            }
        );
        return { params };
    },
});
</script>

使用路由视图和路由链接的例子：

<template>
    <div>
        <div style="text-align: center">
            <br />
            <Link :to="{}">start</Link>
            <br />
            <Link :to="{ p: 'home' }">home</Link>
            <br />
            <Link :to="{ p: 'app' }">app</Link>
            <br />
            <Link :to="{ p: 'redirect' }">redirect</Link>
            <br />
            <Link :to="{ foo: 'foo1' }">foo</Link>
            <br />
            <Link :to="{ bar: 'bar1', other: Math.random().toString() }">
                bar
            </Link>
            <br />
            <Link :to="{ 404: 'not' }">404</Link>
        </div>
        <hr />
        <div style="text-align: center">
            <suspense timeout="0">
                <template #fallback>
                    <Loading />
                </template>
                <View :routes="routes" />
            </suspense>
        </div>
    </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
    components: { Loading, Link, View },
    data: () => {
        return { routes };
    },
});
</script>

接受路由参数：

<template>
    <div>
        <h1>bar</h1>
        <div>{{ msg }}</div>
        <div>{{ JSON.stringify(params) }}</div>
    </div>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
    props: ["msg", "params"],
});
</script>

自定义路由链接组件

<template>
    <Link :to="to" :component="Customlinkcomponent"><slot /></Link>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
    inheritAttrs: true,
    components: { Link },
    data: () => ({ Customlinkcomponent }),
    props: ["to"],
});
</script>

declare const Customlinkcomponent: Component<
    Record<string, any> & {
        innerRef?:
            | {
                  value: any;
              }
            | ((value: any) => void);
        target?: string;
        href: string;
        isActive: boolean;
        navigate: (event?: MouseEvent) => void;
    }
>;

例子:在 React 中使用

https://github.com/masx200/search-hash-params-router/tree/master/example/react/vite-project

导入模块：

import {
    createReactParamsHook,
    createHashRouter,
    createSearchRouter,
    createReactView,
    createReactLink,
} from "@masx200/search-hash-params-router";

创建路由参数 Hook:

const useParams = createReactParamsHook({
    router: searchrouter,
    useEffect,
    useState,
});

在任意组件中获取当前的路由参数:

function Hooktest() {
    const params = useParams();
    useEffect(() => {
        console.log(params);
    }, [params]);
    return <div>params:{JSON.stringify(params)}</div>;
}

接受路由参数：

function Bar({
    msg,
    params,
}: React.PropsWithChildren<{ msg: string; params: any }>) {
    return (
        <div>
            <h1>bar</h1>
            <div>{msg}</div>
            <div>{JSON.stringify(params)}</div>
        </div>
    );
}

创建路由视图组件：

const View = createReactView({
    router: searchrouter,
    createElement,

    useEffect,
    useState,
});

创建路由链接组件：

const Link = createReactLink({
    router: searchrouter,
    useEffect,
    useState,
    createElement,
});

使用路由视图和路由链接的例子：

function RouterTest() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <Link to={{}}>start</Link>
                <br />
                <Link to={{ p: "home" }}>home</Link>
                <br />
                <Link to={{ p: "app" }}>app</Link>
                <br />
                <Link to={{ p: "redirect" }}>redirect</Link>
                <br />
                <Link to={{ foo: "foo1" }}>foo</Link>
                <br />
                <Link to={{ bar: "bar1" }}>bar</Link>
                <br />
                <Link to={{ 404: "not" }}>404</Link>
            </div>
            <div style={{ textAlign: "center" }}>
                <View routes={routes} />
            </div>
        </div>
    );
}

自定义路由链接组件

function YourCustomlink({ to, children, ...rest }) {
    return (
        <Link to={to} component={Customlinkcomponent} {...rest}>
            {children}
        </Link>
    );
}

declare const Customlinkcomponent: ComponentType<
    Record<string, any> & {
        innerRef?: { current: any } | ((current: any) => void);
        target?: string;
        href: string;
        isActive: boolean;
        navigate: (event?: MouseEvent) => void;
    }
>;

API

Typescript 类型声明文件:

https://github.com/masx200/search-hash-params-router/blob/master/src/index.ts

组件`Link` 的`Props`

`to`

表示目标路由的链接参数对象.

`component`

可选参数,可以自定义路由链接组件.

自定义链接组件的`Props`

href：解析后的 URL。将会作为一个 <a></a> 元素的 href 属性。
navigate：触发导航的函数。会在必要时自动阻止事件.
innerRef:用于获取内部的<a></a>标签的元素的Ref.
isActive：链接是否激活状态
其他参数:您也可以传递您希望在<a></a>标签上使用的参数.

`innerRef`

用于获取内部的<a></a>标签的元素的Ref.

其他参数

您也可以传递您希望在<a></a>标签上使用的参数.

组件`View` 的`Props`

`routes`

表示路由条目的数组.

`render`

可选参数,可以自定义路由视图组件.

自定义视图组件的`Props`

component：根据路由条目匹配到的组件.
params：当前的路由参数对象.

Name		Name	Last commit message	Last commit date
Latest commit History 351 Commits
.github		.github
example		example
src		src
test		test
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
LICENSE		LICENSE
README.md		README.md
package.json		package.json
rollup.config.mjs		rollup.config.mjs
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts

License

masx200/search-hash-params-router

Folders and files

Latest commit

History

Repository files navigation

search-hash-params-router

此功能解决了什么问题？

search-router:

hash-router

path-router:

在线演示

安装

提议的 API 是什么样的？

通用例子:

导入模块

序列化参数对象

反序列化参数字符串

创建路由器：

编程式导航:

获取当前路由参数对象

如果没有使用createVueView或createReactView,

那么需要在使用前使用挂载

需要在不使用时使用卸载

监听路由参数的变化事件，监听路由匹配切换的变化：

根据参数获取新链接路径

创建路由条目：

例子:在 Vue 中使用

导入模块：

创建路由视图组件：

创建路由链接组件：

创建路由参数 Hook:

在任意组件中获取当前的路由参数:

使用路由视图和路由链接的例子：

接受路由参数：

自定义路由链接组件

例子:在 React 中使用

导入模块：

创建路由参数 Hook:

在任意组件中获取当前的路由参数:

接受路由参数：

创建路由视图组件：

创建路由链接组件：

使用路由视图和路由链接的例子：

自定义路由链接组件

API

组件Link 的Props

to

component

自定义链接组件的Props

innerRef

其他参数

组件View 的Props

routes

render

自定义视图组件的Props

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 10

Packages 0

Contributors 2

Languages

如果没有使用`createVueView`或`createReactView`,

组件`Link` 的`Props`

`to`

`component`

自定义链接组件的`Props`

`innerRef`

组件`View` 的`Props`

`routes`

`render`

自定义视图组件的`Props`

Packages