hhyang
hhyang
  • 发布:2019-07-14 17:09
  • 更新:2024-03-08 12:05
  • 阅读:28779

uni-simple-router 路由、拦截、最优雅的解决方案

分类:uni-app

vue3 + vite

如果你正在使用 vue3 + vite 请参考 uni-simple-router v3 路由、拦截、最优雅的解决方案重磅来袭,或者查看 官方文档

uni-simple-router

一个更为简洁的Vue-router,专为 uni-app 量身打造

安装

NPM

 npm install uni-simple-router
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
import Vue from 'vue'  
import Router from 'uni-simple-router'  

Vue.use(Router)

大纲

  1. 编程式的导航

  2. 命名式路由

  3. 路由传参

  4. 全局前置守卫

  5. 全局后置钩子

  6. 路由独享守卫

  7. 路由元信息

  8. 完整的导航解析流程

  9. 注意事项

简介说明:

是否你也曾感叹过为啥官方就不搞一个类似 Vue-router 一样的路由管理器?苦苦寻找。搜遍百度?社区?以及 Google?甚至是官方的各大 QQ 群?难受没找到!直到此插件出来之前也没有一个更好的解决方法。于是,没错,就是,它诞生了。只要你会使用 Vue-router 即可马上上手,下面文档的完全不用看。它保留了 Vue-router 完全相似的书写风格,让你 倍感亲切 !

不要脸系列:

最后欢迎大家来PR,一个人的力量是有限的,大家一起来。如果有帮到你们能否在github上点个赞,文章点个赞。赞越多需求完成的越快哦 ,有啥问题在下方留言。不要那么吝啬嘛!

相关连接:

1. uni-simple-router 文档地址

2. uni-simple-router github地址

3. uni-simple-router 插件市场

4.uni-app-tools工具集合

5. uni-app官方路由文档

6.uni-simple-router之H5强化篇

10 关注 分享
SimpleJalon 老哥教教我 萌龙 q***@qq.com 1***@qq.com 完美先生 达达x 2***@qq.com 1***@qq.com qmit

要回复文章请先登录注册

hhyang

hhyang (作者)

## bugFix
* 修复 `H5` 端 `vueRouterDev: true` `history` 模式下刷新后会无限加query ([#124](https://github.com/SilurianYang/uni-simple-router/issues/124))

## add
* **$parseQuery** `getter` 用于处理参数类实例
* 新增 `urlQuery.js` 快捷参数操作类 可以通过 `this.$Router.$parseQuery` 获取
* 路由 `api` 跳转时,当跳转规则为字符串时,参数可以通过 `?` 连接
* `app` 端 `v3` 模式可拦截原生`tabbar`

## revise
* 调整 `H5` 端 参数传递和获取
* `app` 端 `plus.nativeObj.View` 默认显示调整到 `loddingPageHook` 生命周期函数下手动执行
* `app` 端 `init.js` 移除 `createdHoldTab/uniRewritePublicFun` 重写 `rewriteUniFun` 函数
* `app` 端 `uniNav.js` 移除 `pageNavFinish` 函数 并重写 `uniPushTo` 函数
* `app` 端 默认配置移除 `rewriteFun/holdTabbarStyle` 调整 `holdTabbar/loddingPageHook`
* `helpers/util.js` 移除 `queryMp/normalizeParams/strObjToJsonToStr/timeout` 函数
* `helpers/applets-patch.js` 移除 `queryInfo` 函数
2020-06-02 22:46
hhyang

hhyang (作者)

## bugFix
* 修复头条小程序下首次进入小程序时首页生命周期不触发的问题
* 修复 组件式 导航无法动态传参 ([#116 ](https://github.com/SilurianYang/uni-simple-router/issues/116))

## add
* 小程序端调用 `$Router.back()` 触发全局守卫 ([#113 ](https://github.com/SilurianYang/uni-simple-router/issues/113))
* 全局 `navLock` 跳转时加锁、防止快速点击多开页面
* **$lockStatus** `getter` 及 `setter`
* H5、小程序、APP 组件内 `beforeRouteLeave` 路由守卫
* 加入 ts types 声明文件 ([#68 ](https://github.com/SilurianYang/uni-simple-router/issues/68))
* 添加多种初始化示例 【[查看详细](https://github.com/SilurianYang/uni-simple-router/tree/master/examples)】

## revise
* 去除 ` index.js` 下的 `_pushTo ` 方法
* 去除 ` helpers/event.js `
* `index.js` 下抽离跳转方法 到 `navJump.js` 下
* 所有 src 代码添加 eslint 验证
* `holdTabbar/rewriteFun` APP端下由 **true** 调整为 **false**
2020-05-07 17:48
m***@126.com

m***@126.com

为什么看不到回复
2020-04-15 21:35
hhyang

hhyang (作者)

回复 我头没秃 :
## 和这里的问题一样 [小程序无效](https://github.com/SilurianYang/uni-simple-router/issues/108)
2020-04-07 19:12
我头没秃

我头没秃

回复 6***@qq.com :
是全局前置守卫么?我貌似也有这个问题,就刚进小程序的时候会触发,然后点击进入其他页面的时候没触发
2020-04-07 17:34
阿臻

阿臻

回复 6***@qq.com :
你解决了吗
2020-04-06 20:09
hhyang

hhyang (作者)

## bugFix
* APP端 V3模式下 `encodeURI:true` 获取参数报错问题 ([#101](https://github.com/SilurianYang/uni-simple-router/issues/101))
* APP端 V3模式下 取消头部或自定义头部下会触发 onBackPress 导致多次返回的问题 ([#106](https://github.com/SilurianYang/uni-simple-router/issues/106))

## revise
* H5端去除 `Proxy` 实现低版本浏览器兼容 **重要**
* 去除 小程序下未导出的 `callwaitHooks` 函数 ([#94](https://github.com/SilurianYang/uni-simple-router/issues/94))
2020-04-06 14:25
6***@qq.com

6***@qq.com

问下。 按照官方的文档引入 插件后。 微信小程序的路由守卫没有效果。只有在首次进入页面的时候能守卫到。切换页面就没有了
2020-04-01 20:33
RuciDa

RuciDa

回复 1***@163.com :
我也是啊
2020-02-06 12:18
hhyang

hhyang (作者)

## bugFix
* 修复H5端 next 管道函数 传入false 无法拦截的问题
* 修复H5端 next 管道函数 重定向时没有正常解析生命周期的问题
* 修复H5端 在微信浏览器中直接打开某个子页面 点击顶部返回无效的问题
* 修复H5端 history 模式下 首次打开错误页面不执行 path:* 匹配项
* 修复H5端 脚手架项目读取页面配置错误的问题
* 修复APP端 多次跳转拦截异常

## add
* 实例 getter $Route 用于获取当前页面的Route信息
* app端 getter $holdTab 用于获取底部拦截tabbar的实例对象

## revise
* Router实例下的 getQuery 方法 改名为 getter $Route
* app端逻辑重写、新增动画、底部拦截、返回拦截 [查阅更多文档](http://hhyang.cn/src/router/start/app/explian.html)
2019-12-31 10:56