小程序5种路由方法使用场景，封装路由文件和路由方法，提升小程序体验和开发效率
明确要解决的问题
这些问题都可以通过封装路由文件和路由方法解决，提供开发效率，减少bug，省下来的时间可以多陪陪女朋友
封装路由文件，对路由进行统一管理
在根目录创建router.js
我要评论
// 这是路由管理页面，在此统一配置路由
export default {
'index':'/index/index', // 首页
'list':'/list/list', // list页面
'top':'/top/top', // top页面
}
解决了第一个问题
封装路由方法
路由方法有五个，常用的有三个switchtab、navigateto、navigateback
简单介绍一下这五个方法及使用场景
开始封装，在根目录创建utils.js
// 封装路由方法
export default {
/**
* function
* @param {string} url 目标页面的路由
* @param {object} param 传递给目标页面的参数
* @description 处理目标页面的参数，转成json字符串传递给param字段，在目标页面通过json.parse(options.param)接收
*/
navigateto(url,param={}){
if(param){
url+=`?param=${json.stringify(param)}`
}
wx.navigateto({
url:url,
fail(err) {
console.log('navigateto跳转出错',err)
},
})
},
/**
* function
* @param {string} url 目标页面的路由
* @param {object} param 传递给目标页面的参数，只有页面栈无目标页面调用navigateto时，参数才会生效，单单返回不能设置参数
* @description 先取出页面栈，页面栈最多十层，判断目标页面是否在页面栈中，如果在，则通过目标页的位置，返回到目标页面，否则调用navigateto方法跳转到目标页
*/
navigateback(url,param={}){
const pageslist = getcurrentpages()
let index = pageslist.findindex(e=>{
return url.indexof(e.route)>=0
})
if(index == -1){ // 没有在页面栈中，可以调用navigateto方法
this.navigateto(url,param)
}else{
wx.navigateback({
delta: pageslist.length-1-index,
fail(err){
console.log('navigateback返回出错',err)
}
})
}
},
switchtab(url){ // 封装switchtab，switchtab不能有参数
wx.switchtab({
url:url
})
},
redirectto(url,param={}){ // 封装redirectto，和navigateto没啥区别
if(param){
url+=`?param=${json.stringify(param)}`
}
wx.redirectto({
url:url,
fail(err) {
console.log('redirectto跳转出错',err)
},
})
},
relaunch(url,param={}){ // 封装relaunch，和navigateto没啥区别
if(param){
url+=`?param=${json.stringify(param)}`要根据具体业务来，该返回就返回，该跳转就用跳转，不能一直跳转！
}
wx.relaunch({
url:url,
fail(err) {
console.log('relaunch跳转出错',err)
},
})
}
}
以上对参数的封装解决了第二个问题，对navigateback的封装解决了第三个问题
总结
小程序的路由跳转有很多方法，但具体场景下合适的只有一个，选择合适的路由跳转方式会提高用户体验，封装主要是提升开发效率，减少后期维护成本
小程序代码片段地址 https://developers.weixin.qq.com/s/csojwdmr7b8n
,如果帮到了你，就给一颗star吧
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例
CTF 刷题记录（一） 白云新闻搜索（手动与自动化SQL注入）
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论