feat: stronger useRouter

[Ares-Chang]

对问题的清晰和简明的描述

我想整合一个 UniApp 中路由跳转的方法，api 风格部分借鉴自 vue-router。

我在我的模板中初步实现了这个功能，uni-vitesse useRouter，可以点击查看一下。

如果你觉得这个功能 ok，我可以提起一下 pr 一起维护它。

ps: 并且我现在遇到点 ts 的问题不会解决，如果可以，可能帮助我解决它吗？😭

推荐的解决方案

可以查看我的模板示例工程

替代方案

No response

额外上下文

No response

检查

• [X] 遵循我们的 行为准则
• [X] 检查是否已经有一个要求相同功能的问题，以避免重复创建。

[Ares-Chang]

Thanks~ 帮我改了一个问题，非常感谢。 同时提醒了我，我之前写的时候没有想过，如果写在 url 里透传非 string 的话会转换为字符串，包括 number,object 等等。

这一块复杂的 ts 类型是因为，我想在使用的过程中 ts 既提示我定义的参数，又可以兼容 uniapp 原生的参数。 因为我的 ts 并不是很精通，所以这个是在群里问来的写法。如果你有更加简单的写法，也欢迎修改它。

这是一个 Demo Repo

[Ares-Chang]

你对这个函数是怎么看的？是否需要这个功能呢？

如果需要的话，我可以提起一下 pr 。如果不需要的话，我可能会考虑起一个 repo 来放置它。

因为我想保留 useRouter 这个名字，可能会和包内的文件冲突，但是我看了一下，uni-use 里的 useRoute 和 useRouter 是一样的实现，应该就留有兼容的问题了。

[ModyQyW]

我一直希望能有更好的方法在 uni-app 中使用路由，所以我很高兴能扩展 useRouter 的功能！

但我也有一些顾虑。目前已经有 uni-simple-router, vue-router-uni 和 vue-crazy-router 这三个比较流行的 router 库。

1. 我们需要扩展 useRouter 吗？
2. 我们能解决它们不能解决的问题吗？这包括但不限于它们的 issues、用户体验、代码质量、类型安全等。
3. 是否可以与 vite-plugin-uni-pages 或 uni-pages-hot-modules 打配合，减少工作量并实现同样的需求？

我会建议先调研使用者需求，搞清楚这些问题。当然，也非常欢迎另开一个仓库作为实验。这有点像 vite-plugin-legacy-swc ，时机成熟时 vite 会将其纳入为官方插件。

另外我认为和 useRoute 的兼容问题不需要考虑过多，因为实现起来还是很简单的。

[edwinhuish]

回复了你之后又删除，因为不确定你是否在你那个项目的自定义用法。而且手写query参数的stringify还是有很多例外情况，比如嵌套的对象。还不如直接加载 qs 包来得快速。

至于类型的复杂，简单看过你的项目里的代码，也看过你的示例，其中很大程度是由于 path | url 造成了复杂性，其实根本没必要，限制只用 path 或者 url 即可，同样的属性实际是一样的效果，会造成用户的困扰。

不过基于你的问题，你的示例可以改成这样：

另外我的观点和 @ModyQyW 一样，不适宜将简单的事情复杂化。

[ModyQyW]

关于 qs，在 uni-network 那边也有相关问题出现，使用的话也要小心。

https://github.com/uni-helper/uni-network/blob/main/CHANGELOG.md#0160-2023-07-03

https://github.com/uni-helper/uni-network/issues/31

[Ares-Chang]

但我也有一些顾虑。目前已经有 uni-simple-router, vue-router-uni 和 vue-crazy-router 这三个比较流行的 router 库。

感谢分享，我之前只知道 uni-simple-router 这一个库，因为他的 V3 版本闭源收费了，我也没有尝试他现在开放的版本是否支持 Vue 3，所以没有考虑它.（ps: 我想应该是不行，但我没实验，我犯懒了)

• 我们能解决它们不能解决的问题吗？这包括但不限于它们的 issues、用户体验、代码质量、类型安全等。
• 是否可以与 vite-plugin-uni-pages 或 uni-pages-hot-modules 打配合，减少工作量并实现同样的需求？

我的本意并不是想做一个 router 的库，只是想尽量对齐一下 UniApp 和 Vue-Router 中路由跳转的方法。

因为我只做了路由跳转的方法处理，所以并没有什么其它依赖，可以使用原生路由，也可以搭配 vite-plugin-uni-pages 来使用。

我的示例项目中也是使用这约定式路由，还是很香的。

我个人感觉，我现在做的这个功能应该是由路由来提供的，但是原生的方法有点散乱。 vite-plugin-uni-pages 也没有提供(也不应该提供)，所以写了这个方法。

我们需要扩展 useRouter 吗？

这个方法在项目中我一直想分离出去，但是没有地方承接。如果新建一个包的话，它的内容有点过少了。所以我想是否有 Hooks 包可以接收这个方法。

回复了你之后又删除，因为不确定你是否在你那个项目的自定义用法。而且手写query参数的stringify还是有很多例外情况，比如嵌套的对象。还不如直接加载 qs 包来得快速。

[Ares-Chang]

回复了你之后又删除，因为不确定你是否在你那个项目的自定义用法。而且手写query参数的stringify还是有很多例外情况，比如嵌套的对象。还不如直接加载 qs 包来得快速。

非常感谢你提出的建议，我起初并没有想到这个问题，应用的也不是很多。我昨天想了一下是不是和 Vue Router 一样，不接收 Object 类型的 query 传参。但是没有多想，工作有点忙。

但是还是非常感谢，提出问题和解决方法。

另外，这个类型问题我一开始想的是兼容 UniApp 所有的属性，不改变它，所以这样定义了类型。

这个地方，我一开始这样写过，但是我感觉这两个地方定义是存在冲突的。感觉有歧义，所以我修改了它

[edwinhuish]

a | b 同样是兼容 uniapp 的所有属性，约束了当用户传入参数为 a 的时候，不能混入 b 的类型。一般情况下也不会将有冲突的两个 interface 这样定义。

如果你需要完全混入 2 个 interface， 一般是这样定义：

interface Base {
  aa?: string;
  bb?: string;
}

interface A extends Base {
  path: string;
}

interface B extends Base {
  url: string;
}

type C = A | B;

至于 function 里面的 as A & B， 纯粹是为了函数实现方便而已。只要自己知道自己在干什么，用 as 并没有什么不妥，没必要写太繁重的类型定义。

另外，你说是兼容 UniApp 所有的属性，那么你应该引入 UniApp 的类型，而不是自己重新定义一个。

[ModyQyW]

感谢分享，我之前只知道 uni-simple-router 这一个库，因为他的 V3 版本闭源收费了，我也没有尝试他现在开放的版本是否支持 Vue 3，所以没有考虑它.（ps: 我想应该是不行，但我没实验，我犯懒了)

我想应该也是不行，https://github.com/SilurianYang/uni-simple-router/issues/451

我的本意并不是想做一个 router 的库，只是想尽量对齐一下 UniApp 和 Vue-Router 中路由跳转的方法。

那我可能有一部分误解，非常抱歉。

这个方法在项目中我一直想分离出去，但是没有地方承接。如果新建一个包的话，它的内容有点过少了。所以我想是否有 Hooks 包可以接收这个方法。

有不少一个包一个 hook、一个包一个 function 的情况，内容少倒是没什么，主要是为了验证想法和看看效果。你可以直接提交 PR，也可以新建一个包来做试验。

[Ares-Chang]

Thanks~ 沟通后我发现我写的这个方法可能还不完善，等我有时间的时候我可能会搭一个 package 单独上传，正好我也可以学习一下自建 package 。

非常感谢！