路由组件

解决问题

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)