Uniapp零基础开发学习笔记(8) -页面跳转组件及API练习使用
1.navigator页面跳转组件
navigator是一个页面跳转的标签,加在button标签前后即可。
该组件类似HTML中的<a>
组件,但只能跳转本地页面。目标页面必须在pages.json中注册。
该组件的功能有API方式,另见:https://uniapp.dcloud.io/api/router?id=navigateto
典型应用:
url中写好跳转地址,页面需要在pages.json中注册过。
open-type:跳转方式,默认为navigate
其它方式还有redirect(当前页面重定向),swithTab(切换tab)Relauch(关闭其它加载这个页面),
navigateBack(回退)配合delta层级数一起使用
示例代码
<view class="btn-area">
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
<button type="default">在当前页打开</button>
</navigator>
<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
<button type="default">跳转tab页面</button>
</navigator>
</view>
我发现跳转没有实现,查看了网上说如果tabBar里面有这个页面,则应该用switchTab。
把 open-type改为switchTab果然就可以了
<navigator url="/pages/index/index" open-type="switchTab" hover-class="navigator-hover">
<button type="primary" @click="switchTo">跳转到新页面</button>
</navigator>
2.路由及页面跳转API
教程地址:https://uniapp.dcloud.net.cn/api/router.html#navigateto
uni.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
uni.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
uni.reLaunch(OBJECT)
关闭所有页面,打开到应用内的某个页面。
注意: 如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭,仅触发生命周期 onHide
uni.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
注意: 如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭,仅触发生命周期 onHide
uni.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
uni.preloadPage(OBJECT)
预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快。
按照以上用法,按钮增加一个click事件关联switchTo使用api跳转也可以。
switchTo() {
uni.switchTab({
url:"/pages/login/login"
})
}
跳转页面时可传参,例如传递用户名username和用户所在城市usercity,从user.vue到city.vue
export default {
data() {
return {
userinfo:{name:"a123",city:"beijing"}
}
},
methods: {
switchTo() {
uni.switchTab({
url:"/pages/login/login"
})
},
naviTo() {
var urluser1 ="/pages/city/city"
var urluser =urluser1+"?username="+this.userinfo.name+"&usercity="+this.userinfo.city;
console.info(urluser)
uni.navigateTo({
url:urluser
})
}
}
将naviTo绑定到按钮的click事件上,响应函数为naviTo打印终端:
/pages/city/city?username=a123&usercity=beijing at pages/discovery/discovery.vue:79
username和usercity传参成功,但此时city页面没有写接收函数,因此页面依然为
因此在city.vue页面启动时Onload事件加载接收的参数
在city.vue补充内容:
<script>
export default {
data() {
return {
userinfo:{name:"未知",city:"未知"}
};
},
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
console.info(option.username); //打印出上个页面传递的参数。
console.info(option.usercity); //打印出上个页面传递的参数。
this.userinfo.name=option.username;
this.userinfo.city=option.usercity;
}
}
</script>
Onload事件用option序列化接收上个页面发过来的变量参数值,打印出来看正确,再传给本页面中的变量
12:08:34.250 a123 at pages/city/city.vue:16
12:08:34.260 beijing at pages/city/city.vue:17
完成后跳转结果:(传参,接收都成功)
更复杂的用法还有传递之后,如果目标页面接收到了还可以向原始页面传递参数,同时原始页面可以接收,这个比较复杂,
示例代码如下:
主要是用到了eventChannel在两个页面之间传递数据。
// 在起始页面跳转到test.vue页面,并监听test.vue发送过来的事件数据
uni.navigateTo({
url: 'pages/test?id=1',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
}
})
// 在test.vue页面,向起始页通过事件传递数据
onLoad: function(option) {
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}