@xsyx/easy-route
v1.0.3
Published
wx-mp-route
Downloads
5
Readme
路由组件
解决问题
1、微信路由功能增强,增加了路由的全局钩子,beforeRoute(跳转前),afterRoute(跳转后)
2、代码解耦,路由配置(router-config.js),路由钩子处理(router-control.js),页面路由方法调用,全部拆解开
快速开始
1、拷贝 dist/下的router目录,到项目的根目录(推荐)
2、修改路由配置文件router-config.js,添加页面路由项目 例如:
let routes = [{
path: "/pages/home/index/index",//必须配置,保持path和app.json中pages中定义的路径一致,
meta: { //自定义数据,非必须
title: "商品首页",
verifyLogin: true,//当前页面需不用登录标示,可以在beforeRoute钩子函数中处理
}
},
{
path: "/pages/home/detail/detail",
meta: {
title: "商品详情"
}
}]
module.exports = routes
3、修改router-control.js,定义全局钩子(不需要的话,也可以暂时不用修改)
/** 跳转前,全局钩子回调函数,非必须
* @param {Object} to 来源路由对象,包括path,meta
* @param {Object} from 目标路由对象,包括path,meta
* @param {Function} next 是否进行页面跳转,next()跳转,next(false)阻止跳转
*
* */
let beforeRoute = function(to,from,next){
if(to.meta && to.meta.verifyLogin){
console.log('login')
next(false)//阻止页面跳转
}
else{
next()//页面继续跳转
}
}
/** 跳转后,全局钩子回调函数,非必须
* @param {Object} to 来源路由对象,包括path,meta
* @param {Object} from 目标路由对象,包括path,meta
*
* */
let afterRoute = function(to,from){
console.log('从' + from.path + '到' + to.path + '跳转成功!')
}
4、 app.js中引入
const router = require('./router/router-control')//引入组件
//。。。。省略2字。。。
onLaunch(){
//挂载路由
this.router = router.init(this)
}
5、页面中使用路由方法, 例如:
app.router.navigateTo({
path: "/pages/home/index/index",
complete(){//本路由的钩子函数
console.log('complete myself!')
},
params: {//页面参数
orderId: '111'
},
meta:{//自定义数据
verifyLogin:false
}
});
路由方法,和微信的官方方法保持一致,效果也是一致的
1、navigateTo 参数 option
/*
* @param {Object} option
* @param {String} option.path 页面路径,保持和router路由配置中一致,必传参数
* @param {Object} option.params 页面URL参数 {a:11,b:22} 格式化成?a=11&b=22,覆盖在router-config.js中的params
* @param {Object} option.meta 自定义数据,和router-config.js中的meta合并数据,并覆盖相同配置
* @param {Function} option.success 跳转成功回调
* @param {Function} option.fail 跳转失败回调
* @param {Function} option.complete 跳转了就回调
*/
app.router.navigateTo(option)
2、navigateBack 参数 option
/*
* @param {Object} option
* @param {String} option.delta 后退的页面历史记录数目,默认1,返回上一页
* @param {Function} option.success 跳转成功回调
* @param {Function} option.fail 跳转失败回调
* @param {Function} option.complete 跳转了就回调
*/
app.router.navigateBack(option)
3、redirectTo 参数 option
/*
* @param {Object} option
* @param {String} option.path 页面路径,保持和router路由配置中一致,必传参数
* @param {Object} option.params 页面URL参数 {a:11,b:22} 格式化成?a=11&b=22,覆盖在router-config.js中的params
* @param {Object} option.meta 自定义数据,和router-config.js中的meta合并数据,并覆盖相同配置
* @param {Function} option.success 跳转成功回调
* @param {Function} option.fail 跳转失败回调
* @param {Function} option.complete 跳转了就回调
*/
app.router.redirectTo(option)
4、reLaunch 参数 option
/*
* @param {Object} option
* @param {String} option.path 页面路径,保持和router路由配置中一致,必传参数
* @param {Object} option.params 页面URL参数 {a:11,b:22} 格式化成?a=11&b=22,覆盖在router-config.js中的params
* @param {Object} option.meta 自定义数据,和router-config.js中的meta合并数据,并覆盖相同配置
* @param {Function} option.success 跳转成功回调
* @param {Function} option.fail 跳转失败回调
* @param {Function} option.complete 跳转了就回调
*/
app.router.reLaunch(option)
5、switchTab 参数 option
/*
* @param {Object} option
* @param {String} option.path 页面路径,保持和router路由配置中一致,必传参数
* @param {Object} option.meta 自定义数据,和router-config.js中的meta合并数据,并覆盖相同配置
* @param {Function} option.success 跳转成功回调
* @param {Function} option.fail 跳转失败回调
* @param {Function} option.complete 跳转了就回调
*/
app.router.switchTab(option)