微信小程序 封装路由 mini-router
1.介绍mini-router 是一个在微信小程序中使用的路由模块，主要用于在小程序中的路由模块化和解耦，解决小程序中的路由地址的硬编码。? 原生路由：
mini-routerapp$routerpush"logs") // 用法：2"mine")successres =>{"success: ")failerr "fail: ")})complete_ // 用法：3 (传参){ key value
// app.jsimport MiniRouter from'./route/router'onLaunchfunction{ this$router =newMiniRouter()// 第二步：配置route文件夹中的pages模块 （url 直接复制app.json里的pages）exportdefault[{ url'pages/index/index' name'index''pages/mine/mine''pages/logs/logs''logs''pages/login/login''login''pages/next/next''next'}]// 第三步：在需要的文件里 使用)3.支持的方法目前mini-router支持微信小程序里的路由的所有方法，函数名对比:
4.函数介绍push(name,params = null)? reLaunch(name,params = null)? redirect(name,params = null)? switchTab(name)? back(delta = 1,params = null)? backHome(params = null)? 5.错误处理当你输入一个在pages模块中找不到的路由时(log)，mini-router会抛出错误，例如： "log" log"这是一个Log" /*!! Not found page ->：[log] !!; [Component] Event Handler Error @ pages/index/index#bound handlePushLogs*/6.获取传递的参数mini-router内置了一个属性params，它会根据你跳转的页面，动态的更换当前属性的值。 // 当我传递了一个参数 { log: "这是一个Log" }
})// 然后我在下一个界面的onShow/onLoad里接收constparams app.paramsparamslog // 这是一个Log参数存储在storage里，你可以通过小程序调试工具看到:
mini-router params 获取参数时，你不必知道它存储在storage里的key是什么，你只要拿app.$router.params就可以了 7.反向传值mini-router 通过back或者backHome函数实现反向传值（反向携带参数） back(1 isLoginfalse// 中间页传值给最后一页，最后一页携带值给首页 data }paramsbackHome({})当你选择不携带参数返回时，在首页你将拿不到app.$router.params,因为mini-router会把params软删除，如果你需要的话，你还是可以从storage里拿到它。 8.状态处理mini-router同小程序一样，提供三种状态success， fail， complete? ) }))
* Query 方式传递参数 */handlePushLogsQuery app"这是一个Log" name"hellolad"'query'handlePushLoginQuery$router "login" phoneNumber"1561900000000"{ console})handleReLaunchArticleQueryreLaunch"article" articleId'10002'})handleRedirectLoginQuery{redirect'1561900000000')// 获取参数和普通的params传参获取参数一样: phoneNumber params// 也可以在onLoad(options)里获取console"login options" options// 生成的url类似：/pageslogin?phoneNumber=1561900000000寄语：对于前端来说，可以说初窥门径，想要更深入一步，还是要坚持不断的学习和看源码。mini-router可以实现小程序里路由的跳转，也将成为我下一个小程序使用的路由模块，如果有不足的地方欢迎题issuse，如果有好的想法，欢迎pull request。 Github:?https://github.com/hellolad/mini-router （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
