Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/masx200/search-hash-params-router
使用 location.search 和 location.hash中查询参数的前端路由器，而不是动态路由匹配,不需要"Path-to-RegExp"了
https://github.com/masx200/search-hash-params-router
hash history-mode routers
Last synced: 6 days ago
JSON representation
使用 location.search 和 location.hash中查询参数的前端路由器，而不是动态路由匹配,不需要"Path-to-RegExp"了
- Host: GitHub
- URL: https://github.com/masx200/search-hash-params-router
- Owner: masx200
- License: mit
- Created: 2020-04-22T12:13:45.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-08-04T03:28:56.000Z (over 1 year ago)
- Last Synced: 2024-10-08T11:44:11.620Z (about 1 month ago)
- Topics: hash, history-mode, routers
- Language: TypeScript
- Homepage: search-hash-params-router-vue.vercel.app
- Size: 1.74 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# search-hash-params-router
使用 `location.search` 和 `location.hash` 和`location.pathname`中查询参数的前端路由器,
支持在 `react`17 和 `vue`3 中使用.
不需要"Path-to-RegExp"了
为路由器添加查询参数模式。基于历史记录模式。使用查询参数匹配而不是动态路由匹配。
使用 `URLSearchParams`和`btoa`和`atob`进行序列化和反序列化
### 此功能解决了什么问题？
使用查询参数模式不需要服务器设置路由回退。
我们可以使用路由的 `history` 模式，充分利用 `history.pushState` API，无需重新加载页面即可完成 URL 跳转。
当您使用历史模式时，该 URL 就像一个普通的 url。
我在使用历史模式时遇到了以下问题。
但是，要使用此模式，您需要配置后台支持。
如果后台没有配置好，当用户直接在浏览器中访问时，会返回 404。
我个人不喜欢动态路由匹配模式，我喜欢查询参数匹配模式。
例如:
### search-router:
```json
{ "foo": "bar", "baz": "12321" }
```
```txt
https://nodejs.org/en/?YmF6PTEyMzIxJmZvbz1iYXI=
```
### hash-router
```json
{ "view": "home", "op": "translate" }
```
```
https://translate.google.cn/#b3A9dHJhbnNsYXRlJnZpZXc9aG9tZQ==
```
### path-router:
```json
{ "foo": "bar", "baz": "12345" }
```
```txt
https://nodejs.org/en/YmF6PTEyMzQ1JmZvbz1iYXI=
```
# 在线演示
https://search-hash-params-router-vue.vercel.app/
https://search-hash-params-router-react.vercel.app/
## 安装
```shell
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`中获取。
可以通过以下方式修改查询参数。
## 通用例子:
### 导入模块
```js
import {
createHashRouter,
createSearchRouter,
createPathRouter,
serializeParams,
deserializeParams,
} from "@masx200/search-hash-params-router";
```
#### 序列化参数对象
```js
let string = serializeParams({ foo: "bar", baz: "12321" });
```
#### 反序列化参数字符串
```js
let object = deserializeParams("YmF6PTEyMzIxJmZvbz1iYXI=");
```
#### 创建路由器：
```js
const hashrouter = createHashRouter();
```
```js
const searchrouter = createSearchRouter();
```
```js
const pathrouter = createPathRouter();
```
#### 编程式导航:
```ts
searchrouter.setparams({ qqqqq: Math.random().toString() });
searchrouter.transformparams((o) => {
return {
...o,
qqqqq: Math.random().toString(),
};
});
```
#### 获取当前路由参数对象
```js
console.log(searchrouter.getparams());
```
#### 如果没有使用`createVueView`或`createReactView`,
##### 那么需要在使用前使用挂载
```js
searchrouter.mount();
```
##### 需要在不使用时使用卸载
```js
searchrouter.unmount();
```
#### 监听路由参数的变化事件，监听路由匹配切换的变化：
```js
searchrouter.on("params", (p) => {
console.log(p);
});
```
#### 根据参数获取新链接路径
```js
let newhref = searchrouter.gethref((o) => {
return { ...o, qqqqq: Math.random().toString() };
});
```
```js
let newhref = searchrouter.gethref(( {qqqqq: Math.random().toString() })
```
#### 创建路由条目：
```ts
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
#### 导入模块：
```js
import {
createVueParamsHook,
createHashRouter,
createSearchRouter,
createVueView,
createVueLink,
} from "@masx200/search-hash-params-router";
```
#### 创建路由视图组件：
```js
const View = createVueView({
readonly,
onMounted,
onUnmounted,
router: hashrouter,
resolveComponent,
defineComponent,
h,
ref,
});
```
#### 创建路由链接组件：
```js
const Link = createVueLink({
router: hashrouter,
ref,
onMounted,
onUnmounted,
readonly,
resolveComponent,
defineComponent,
h,
});
```
#### 创建路由参数 Hook:
```js
const useParams = createVueParamsHook({
router: hashrouter,
ref,
readonly,
onMounted,
onUnmounted,
});
```
#### 在任意组件中获取当前的路由参数:
```vue
params:{{ JSON.stringify(params) }}
export default defineComponent({
setup() {
const params = useParams();
watch(
() => params.value,
(params) => {
console.log(params);
}
);
return { params };
},
});
```
#### 使用路由视图和路由链接的例子：
```vue
start
home
app
redirect
foo
bar
404
import { defineComponent } from "vue";
export default defineComponent({
components: { Loading, Link, View },
data: () => {
return { routes };
},
});
```
#### 接受路由参数：
```vue
bar
{{ msg }}
{{ JSON.stringify(params) }}
import { defineComponent } from "vue";
export default defineComponent({
props: ["msg", "params"],
});
```
### 自定义路由链接组件
```vue
import { defineComponent } from "vue";
export default defineComponent({
inheritAttrs: true,
components: { Link },
data: () => ({ Customlinkcomponent }),
props: ["to"],
});
```
```ts
declare const Customlinkcomponent: Component<
Record & {
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
#### 导入模块：
```js
import {
createReactParamsHook,
createHashRouter,
createSearchRouter,
createReactView,
createReactLink,
} from "@masx200/search-hash-params-router";
```
#### 创建路由参数 Hook:
```js
const useParams = createReactParamsHook({
router: searchrouter,
useEffect,
useState,
});
```
#### 在任意组件中获取当前的路由参数:
```jsx
function Hooktest() {
const params = useParams();
useEffect(() => {
console.log(params);
}, [params]);
return
params:{JSON.stringify(params)};
}
```
#### 接受路由参数：
```tsx
function Bar({
msg,
params,
}: React.PropsWithChildren<{ msg: string; params: any }>) {
return (
bar
{msg}
{JSON.stringify(params)}
);
}
```
#### 创建路由视图组件：
```js
const View = createReactView({
router: searchrouter,
createElement,
useEffect,
useState,
});
```
#### 创建路由链接组件：
```js
const Link = createReactLink({
router: searchrouter,
useEffect,
useState,
createElement,
});
```
#### 使用路由视图和路由链接的例子：
```jsx
function RouterTest() {
return (
start
home
app
redirect
foo
bar
404
);
}
```
### 自定义路由链接组件
```jsx
function YourCustomlink({ to, children, ...rest }) {
return (
{children}
);
}
```
```ts
declare const Customlinkcomponent: ComponentType<
Record & {
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。将会作为一个 `` 元素的 href 属性。
- `navigate`：触发导航的函数。会在必要时自动阻止事件.
- `innerRef`:用于获取内部的``标签的元素的`Ref`.
- `isActive`：链接是否激活状态
#### `innerRef`
#### 其他参数
### 组件`View` 的`Props`
#### `routes`
表示路由条目的数组.
#### `render`
可选参数,可以自定义路由视图组件.
##### 自定义视图组件的`Props`
- `component`：根据路由条目匹配到的组件.
- `params`：当前的路由参数对象.