其实在网上也看到很多人发的帖子,有的写得很详细了,但是自己还想总结一下我认识的跳转:
我们很常用的页面中写url的就是
1、navigator 关于它官方文档给了很详细的说明,我们也可以去参考一下官方的文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
<navigatorurl="/page/navigate/navigate?title=navigate"hover-class="navigator-hover">跳转到新页面</navigator><navigatorurl="../../redirect/redirect/redirect?title=redirect"open-type="redirect"hover-class="other-navigator-hover">在当前页打开</navigator><navigatorurl="/page/index/index"open-type="switchTab"hover-class="other-navigator-hover">切换 Tab</navigator><navigatortarget="miniProgram"open-type="navigate"app-id=""path=""extra-data=""version="release">打开绑定的小程序</navigator>
我们常用的可能也就是上面的这几种方式,加一个点击时候触发的样式
.navigator-hover{color:blue;}
2、wx.redirectTo
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
其它的不多说,重点都在粗体,我曾经因为写了这个不跳转,纠结了一个多小时,最后才出坑
3、wx.navigateTo
页面中大部分的跳转我都用了这个,但是后来发现,根据项目的不同需求,这个跳转方式也是有局限性的。
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
这个里面我想说的是注意刷新问题,返回上一页只是返回上一页,上一页如果在栈中,注意需不需要刷新
4、wx.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
5、wx.reLaunch
关闭所有页面,打开到应用内的某个页面
说一下除了第一种其他页面跟参数的问题
wx.navigateTo({
url: '../../pages/detail/index?id=' + e.currentTarget.dataset.id
})
跳转到的页面获取参数,此处需要注意,接收参数是在小程序生命周期的onLoad函数中接收数据
onLoad: function (options) {
var itemid=options.id;
console.log(itemid);//打印接受的值
}