UniApp小程序如何路由跳转方式
navigator 组件跳转
navigator 组件类似HTML中的 组件,但只能跳转本地页面。目标页面必须在pages.json中注册。open-type默认是navigate的方式,接收页面也是采用Onload方法接收
<!--navigator 下面pages有绑定底部导航栏就跳不了了 navigate-->
<!--navigator默认跳转方式 navigate-->
<navigator url="/pages/auth/login" open-type="navigate">
<button> 直接跳转</button>
</navigator>
<navigator :url="'/pages/auth/login?params='+ encodeURIComponent(JSON.stringify({id:1,name:'蒋皓洁',text:'呀呀呀呀'}))" open-type="navigate">
<button> 带参数跳转</button>
</navigator>
<navigator url="/pages/order/order" open-type="redirect">
<button type="default">打开redirect的订单页面</button>
</navigator>
<!--navigator 下面pages有绑定底部导航栏可跳 navigate-->
<navigator url="/pages/category/category" open-type="switchTab">
<button type="default">打开tabBar的订单页面</button>
</navigator>
注意:
在pages.json填写一下代码
记了要更改路径哦!!!
{
"pages": [
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/test/test",
"style": {
"navigationBarTitleText": "列表"
}
}
}
- 参数
一、uni.switchTab (OBJECT)
uni.switchTab({
url:../login/login
})*
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
二、uni.navigateTo(OBJECT)
uni.navigateTo({undefined
url:../login/login?name=${参数}
})
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
三、uni.redirectTo(OBJECT)
uni.redirectTo({undefined
url:../login/login?name=${参数}
})
关闭当前页面,跳转到应用内的某个页面。
四、uni.reLaunch(OBJECT)
uni.reLaunch({undefined
url:../login/login?name=${参数}
})
关闭所有页面,打开到应用内的某个页面。
五、uni.navigateBack(OBJECT)
uni.navigateBack({undefined
url:../login/login?name=${参数}
})
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
六、uni.preloadPage(OBJECT)
uni.preloadPage({undefined
url:../login/login
})
预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快。