uni-app学习笔记——路由与页面跳转
小颖最近在学习小程序，怕自己前看后忘，毕竟还没开始进入项目实践中，就自己瞎倒腾嘻嘻，今天来看下 uni-app 的路由与页面跳转，小颖就简单列举下它们的用法，具体的大家可以看官网哦！啦啦啦啦啦 啦啦啦啦啦啦 就是想i偷懒嘻嘻
简单总结 uniapp常用跳转API
| API | 作用 |
|---|---|
| uni.navigateTo | 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 |
| uni.redirectTo | 关闭当前页面，跳转到应用内的某个页面。 |
| uni.reLaunch | 关闭所有页面，打开到应用内的某个页面。 |
| uni.switchTab | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。 |
| uni.navigateBack | 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。 |
官网：路由与页面跳转
路由与页面跳转
uni.navigateTo
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
注意：只能打开非 tabBar 页面。
示例
// 跳转页面 openNewPage (data) { const { url } = data console.log(url + '?id=' + data.id + '&name=' + data.name) uni.navigateTo({ url: (url + '?id=' + data.id + '&name=' + data.name) }) }
// 在跳转过来的页面的接收参数 onLoad (option) { this.pageData = option console.log(option.id); //打印出上个页面传递的参数。 console.log(option.name); //打印出上个页面传递的参数。 },
页面效果
未跳转页面 接收参数页面
发现
可以看到导航栏有回退按钮。
uni.redirectTo
关闭当前页面，跳转到应用内的某个页面。
注意：redirectTo 只能打开非 tabBar 页面。
示例
// 跳转页面 openNewPage (data) { const { url } = data console.log(url + '?id=' + data.id + '&name=' + data.name) uni.redirectTo({ url: (url + '?id=' + data.id + '&name=' + data.name) }) }
// 在跳转过来的页面的接收参数 onLoad (option) { this.pageData = option console.log(option.id); //打印出上个页面传递的参数。 console.log(option.name); //打印出上个页面传递的参数。 },
页面效果
未跳转页面 接收参数页面
发现
没有回退按钮，但有回到主页按钮
uni.reLaunch
关闭所有页面，打开到应用内的某个页面。
注意：
- 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期
onHide； - reLaunch 可以打开任意页面。
示例
// 跳转页面 openNewPage (data) { const { url } = data console.log(url + '?id=' + data.id + '&name=' + data.name) uni.reLaunch({ url: (url + '?id=' + data.id + '&name=' + data.name) }) }
// 在跳转过来的页面的接收参数 onLoad (option) { this.pageData = option console.log(option.id); //打印出上个页面传递的参数。 console.log(option.name); //打印出上个页面传递的参数。 },
页面效果
未跳转页面 接收参数页面
发现
没有回退按钮，但有回到主页按钮
uni.switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
注意：switchTab 只能打开 tabBar 页面。
示例
比如从跳转页面一中，点击按钮，切换当前的 tabBar
<template>
<view>
跳转页面1
<view class="page-box">
获取的页面信息id：{{pageData.id}},name：{{pageData.name}}
</view>
<view>
<button type="default" @click="changeTabBar" size="mini">跳转到个人中心</button>
</view>
</view>
</template>
<script>
export default {
data () {
return {
pageData: {
id: '',
name: ''
}
}
},
// 在跳转过来的页面的接收参数
onLoad (option) {
this.pageData = option
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
},
methods: {
// 改变当前tabBar 页面
changeTabBar(){
uni.switchTab({
url: '/pages/personalCenter/personalCenter'
});
}
}
}
</script>
<style>
</style>
pages.json
"tabBar": { "color": "#cdd5e2", "selectedColor": "#55ABFF", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/index/index", "iconPath": "./static/common/homeNo.png", "selectedIconPath": "./static/common/home.png", "text": "首页" }, { "pagePath": "pages/personalCenter/personalCenter", "iconPath": "./static/common/userNo.png", "selectedIconPath": "./static/common/user.png", "text": "我的" }] }
页面效果
跳转前 跳转后
uni.navigateBack
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
注意：仅 uni.navigateTo 调用可返回上一层，uni.redirectTo、uni.reLaunch 调用不起作用，因为都会关闭页面再打开新的
示例
从首页中跳到 跳转页面2
// 跳转页面 openNewPage (data) { const { url } = data console.log(url + '?id=' + data.id + '&name=' + data.name) uni.navigateTo({ url: (url + '?id=' + data.id + '&name=' + data.name) }) }
跳转页面2中，点击 返回上一页 按钮，执行返回上一层
<template>
<view>
跳转页面2
<view>
<button type="default" @click="backPage" size="mini">返回上一页</button>
</view>
</view>
</template>
<script>
export default {
data () {
return {
}
},
onLoad (option) {
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
},
methods: {
backPage () {
console.log('22222222')
uni.navigateBack({
delta: 1
});
}
}
}
</script>
<style>
</style>
页面效果
点击 返回上一页 按钮，页面就会回到首页
EventChannel
2.8.9+ 支持 页面间事件通信通道
方法
EventChannel.emit(string eventName, any args)
触发一个事件
string eventName 事件名称
any args 事件参数
EventChannel.off(string eventName, function fn)
取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数
string eventName 事件名称
function fn 事件监听函数
参数 any args 触发事件参数
EventChannel.on(string eventName, function fn)
持续监听一个事件
string eventName 事件名称
function fn 事件监听函数
参数 any args 触发事件参数
EventChannel.once(string eventName, function fn)
监听一个事件一次，触发后失效
string eventName 事件名称
function fn 事件监听函数
参数 any args 触发事件参数
示例：
小颖就先以 eventChannel.emit 示范下如何使用
在page1.vue中
<template>
<view>
跳转页面1
<view class="page-box">
获取的页面信息id：{{pageData.id}},name：{{pageData.name}}
</view>
<view>
<button type="default" @click="changeTabBar" size="mini">跳转到个人中心</button>
<button type="default" @click="changePages" size="mini">跳到第三个页面</button>
</view>
</view>
</template>
<script>
export default {
data () {
return {
pageData: {
id: '',
name: ''
},
getEventsDt: {
acceptDataFromOpenedPage: '',
someEvent: '',
}
}
},
// 在跳转过来的页面的接收参数
onLoad (option) {
this.pageData = option
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
},
onShow () {
// 打印从 页面3 给 页面1 通过事件传递的数据
console.log(this.getEventsDt)
},
methods: {
// 改变当前tabBar 页面
changeTabBar () {
uni.switchTab({
url: '/pages/personalCenter/personalCenter'
});
},
changePages () {
const _this = this;
uni.navigateTo({
url: ('/pages/toPage/page3'),
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function (data) {
_this.getEventsDt.acceptDataFromOpenedPage = data.data
console.log(data)
},
someEvent: function (data) {
_this.getEventsDt.someEvent = data.data
console.log(data)
}
},
success: function (res) {
// 通过eventChannel向被打开页面传送数据
let _obj = {
id: '222',
title: '测试'
}
res.eventChannel.emit('acceptDataFromOpenerPage', _obj)
}
})
}
}
}
</script>
<style>
</style>
在跳转的页面3中 page3.vue
<template>
<view>
我是页面3
</view>
</template>
<script>
export default {
data () {
return {
}
},
// 在跳转过来的页面的接收参数
onLoad (option) {
// // #ifdef APP-NVUE
// const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
// // #endif
// #ifndef APP-NVUE
const eventChannel = this.getOpenerEventChannel();
// #endif
eventChannel.emit('acceptDataFromOpenedPage', { data: 'data from page3' });
eventChannel.emit('someEvent', { data: 'data from page3 for someEvent' });
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function (data) {
console.log(data)
})
},
methods: {
}
}
</script>
<style>
</style>
打印结果：
页面1 中的打印结果
页面3 的打印结果
从页面3 返回 页面1 时 ，在 onShow 生命周期函数中 打印出来 页面3 给 页面1 传递的数据
在uni-app中一般传值就是用 url 或者是上面的方法，两种方法的对比
上面的方法的优势：
- url有长度限制，太长的字符串会传递失败，eventChannel事件回调则不回
- 跳转新页面，能根据新页面内容反传给旧页面内容，上面代码没有体现，详见官方文档
劣势：
- 事件回调是在页面加载完成后才进行的回调，在computed里的内容计算完成后才会执行事件回调，因此页面会先显示默认值，再闪一下变成正确的值
注意：
navigateTo,redirectTo只能打开非 tabBar 页面。switchTab只能打开tabBar页面。reLaunch可以打开任意页面。- 页面底部的
tabBar由页面决定，即只要是定义为tabBar的页面，底部都有tabBar。 - 不能在
App.vue里面进行页面跳转。 - H5端页面刷新之后页面栈会消失，此时
navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。
