微信小程序 封装路由 mini-router

微信小程序 封装路由 mini-router,第1张

目前mini-router支持微信小程序里的路由的所有方法,函数名对比:

当你输入一个在pages模块中找不到的路由时(log),mini-router会抛出错误,例如:

mini-router内置了一个属性 params ,它会根据你跳转的页面,动态的更换当前属性的值。

参数存储在storage里,你可以通过小程序调试工具看到:

获取参数时,你不必知道它存储在storage里的key是什么,你只要拿 app.$router.params 就可以了

mini-router 通过 back 或者 backHome 函数实现反向传值(反向携带参数)

当你选择不携带参数返回时,在首页你将拿不到 app.$router.params ,因为 mini-router 会把 params 软删除,如果你需要的话,你还是可以从storage里拿到它。

mini-router同小程序一样,提供三种状态 success , fail , complete

不同于小程序,mini-router使用链式调用来处理这三种状态,

上面的都是通过params传参,传的参数缓存在了storage里,新增加的query类型传参,将参数拼接到了url后面:

Github: https://github.com/hellolad/mini-router

一:url带参数传递

与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面。

index.wxml:

效果图:

二:将值存入全局变量

我们同样可以将需要的值存入全局变量中,在需要的地方直接引用就好了。

需要用到全局变量时记得要先获取应用实例: const app = getApp()

**三, 用event传值

JS文件

如何获取 获取微信小程序URL参数 一般是web开发者的描述,但按照小程序的叫法应该是 获取当前打开页面路径中的参数

假如当前打开的页面路径为 list/list?id=123

页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。

参数说明


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11455052.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存