API跳转
-
uni.navigateTo(object)
保留当前页面，跳转到新页面，使用uni.navigateBack()可以返回到原页面。
基本使用示例如下：
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
其他使用示例如下：
vue2
// 在起始页面跳转到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)
})
}
vue3：script setup 语法糖中调用 getOpenerEventChannel 示例：
<script setup>
import {
onMounted,
getCurrentInstance
} from 'vue';
onMounted(() => {
const instance = getCurrentInstance().proxy
const eventChannel = instance.getOpenerEventChannel();
eventChannel.emit('acceptDataFromOpenedPage', {
data: 'data from test page'
});
eventChannel.emit('someEvent', {
data: 'data from test page for someEvent'
});
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log('acceptDataFromOpenerPage', data)
})
})
</script>
注意：
- 页面跳转路径有层级限制，不能无限制跳转新页面
- 跳转到 tabBar 页面只能使用 switchTab 跳转
- 路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url，在App平台可以使用 plus.runtime.openURL或web-view组件；H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。在hello uni-app中有个组件ulink.vue已对多端进行封装，可参考。
-
uni.redirectTo(object)
关闭当前页面，跳转到应用内的某个页面。
基本使用示例如下：
uni.redirectTo({
url: 'test?id=1'
});
注意：
- 跳转到 tabBar 页面只能使用 switchTab 跳转
-
uni.reLaunch(object)
关闭所有页面，打开到应用内的某个页面。
-
uni.switchTab(object)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
-
uni.navigateBack(object)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
-
EventChannel
2.8.9+ 支持
HarmonyOS Next 不支持
页面间事件通信通道
-
uni.preloadPage(object)
预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。
navigator组件跳转
使用示例如下
// 跳转到 /pages/info/index.vue页面，注意此页面不可以是tabBar页面
<navigator url="/pages/info/index?key=100&key2=300" open-type="navigate">
<view class="uni-link-item">点我跳转</view>
</navigator>
// /pages/info/index.vue页面接受参数
export default {
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.key); //打印出上个页面传递的参数。
console.log(option.key2); //打印出上个页面传递的参数。
}
}
// 在起始页面跳转到../components/test.vue页面并传递item={name:"kity",id:1} 参数,注意url有长度限制，过长会导致参数传递失败，可用encodeURIComponent方式解决。
<navigator :url="'/pages/info/index?item='+ encodeURIComponent(JSON.stringify(item))" open-type="navigate"> 点我跳转</navigator>
// 在info.vue页面接受参数
onLoad: function (option) {
const item = JSON.parse(decodeURIComponent(option.item));
}
