uni-app快速入门（七）--组件路由跳转和API路由跳转及参数传递
uni-app有两种页面路由跳转模式，即使用navigator组件跳转和调用API跳转，API调转不要理解为调用后台接口的API，而是指脚本函数中使用跳转函数。
一、组件路由跳转
1.1 打开新页面
打开新页面使用组件的open-type="navigate",见下面的代码：
<navigator url="/pages/news/index" open-type="navigate" hover-class="navigator-hover">
<button>navigate跳转到新闻页面</button>
</navigator>
如果不在navigator组建中添加open-type属性，则默认为open-type="navigate"
1.2 页面重定向
<navigator url="/pages/news/index" open-type="redirect" hover-class="navigator-hover">
<button>redirect跳转到新闻页面</button>
</navigator>
页面重定向使用了open-type="redirect"，注意使用页面重定向不会进入历史记录，不支持
页面返回。
1.3 页面返回
页面返回使用open-type="navigateBack":
<navigator open-type="navigateBack" >
<button type="default">返回</button>
</navigator>
1.4 Tab切换
Tab切换主要用于从当前页面跳转到TabBar中的页面，例如我我的页面跳转到购物车页面：
<navigator url="/pages/cart/index" open-type="switchTab" hover-class="navigator-hover">
<button>跳转到购物车</button>
</navigator>
1.5 reLaunch
open-type设置为reLaunch时，会进行重加载，页面全部出栈，只留下新页面（例如跳转到首页），跳转后的页面不支持页面返回：
<navigator open-type="reLaunch" url="/pages/index/index"><button>reLaunch跳转到首页</button></navigator>
二、API路由跳转
2.1 打开新页面
在button组件中增加一个click方法goPage：
<button @click="goPage('/pages/news/index')">跳转到新闻页面</button>，然后script脚本实现goPage方法，goPage中使用uni.navigateTo实现路由跳转：
<script>
export default{
name:"index",
methods:{
goPage(url){
uni.navigateTo({url:url}) //url中可以带传输，类似html的传参
}
}
}
</script>
2.2 页面重定向
使用uni.redirectTo()方法关闭当前页面，跳转到应用内的某个页面，如果跳转到tabBar页面只能使用switchTab跳转。
2.3 页面返回
使用uni.navigateBack()方法关闭当前页面，返回上一页面或多级页面，并且可以决定需要返回几层：
uni.navigateBack({delta:1})
此方法类似vue中的this.$router.go(-1),其中delta参数表示返回的页面数，如果大于现有页面数则返回到首页。
2.4 Tab切换
使用uni.switchTab()方法跳转到tabBar页面，并关闭所有其他非 tabBar页面。
2.5 reLaunch
使用uni.reLaunch()可以关闭所有页面，接着跳转到应用内的某个页面。
三、参数传递
3.1 接收参数
例如首页跳转到新闻页带参数：
uni.navigateTo({
url:'pages/news/index?id=1&title=新闻'
})
在pages/news/index.vue页面接收参数：
onLoad(opts){
console.log(opts.id)//取id参数
console.log(opts.title)//取title参数
}
需要注意的是，url有长度限制，太长的字符串会传递失败，可以用encodeURIComponent()方法解决，例如url:"pages/news/index?id=1&title="+encodeURIComponent('新闻动态')
接收参数的时候使用decodeURIComponent:
console.log(decodeURLComponent(opts.title))
3.2 获取当前页栈
使用navigateTo()跳转会将页面添加到页面栈中，使用getCurrentPage()获取所有页面栈，第一个页面索引为0，最后进栈的是当前页（索引最大的,索引为总页面栈数量-1）：
onLoad(opts){
//获取页面栈
let pages = getCurrentPaes();
//第一个页面
let firstPage = pages[0];
console.log(firstPage.route);//结果pages/index/index
//获取当前页
let currPage = pages[pages.length-1];
console.log(currPage.route);//最后打开的页
}
3.3 解决微信小程序10层跳转限制
微信小程序为解决性能问题，使用navigateTo()方法跳转，其页面限制为10层，解决方案是10页面以内使用navigateTo,超过10页使用redirectTo,例如下面的代码：
组件使用自定义pushPage方法:
<div @click="pushPage('pages/news/index?id=1&title=XXX')">xxx新闻标题</div>
页面脚本：
onLoad(opts){
let pages = getCurrentPages();
//获取页面栈总页数
this.pagesCount = pages.length;
},
methods:{
pushPage(url){
if(this.pageCount>10){
uni.redirectTo({url})
}
else{
uni.navigateTo({url:url})
}
}
}
3.4 解决tabBar不能传参问题
跳转到 tabBar页面是不能传参的，此时可以将参数传入本地缓存实现传参。例如组件中使用<div @click="goPage('pages/index/index','1')">北京店</div>，脚本中goPage：
goPage(url,id){
uni.setStorageSync("branch_shop_id",id);//设置缓存名字branch_shop_id，并将传入的id存入缓存
uni.switchTab({url})
}
然后在接收页面pages/index/index的脚本中接收参数：
onShow(){
let branchShopId = uni.getStorageSync("branch_shop_id");
console.log(branchShopId);
}
本节总结：
本节介绍了uni-app的组件路由跳转、API路由跳转、uni-app接收参数及层级限制，以及tabBar使用本地缓存实现参数传递等。
原文地址：https://blog.csdn.net/baozhengw/article/details/143828437
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！