uniapp内置多种跳转方式,我这里介绍两个最常用的跳转,uni.navigateTo和uni.switchTab,前者为跳转到非TabBar页面,后者为跳转到TabBar页面,所谓TabBar就是底部导航栏配置的页面,例如下方的index.vue。
在pages.json中
"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "static/buliangzhu.png","selectedIconPath": "static/zhuyeliang.png"},{"pagePath": "pages/user/user","text": "个人中心","iconPath": "static/user2.png","selectedIconPath": "static/user1.png"}]},
配置成导航栏的页面无法通过navigateTo方法跳转,只能通过switchTab方法。
一、navigateTo
例如我们需要在index.vue页面里面跳转到test1.vue,test1是非tabBar页面,就给需要绑定事件的按钮添加点击事件。再在methods里面编写方法,调用uni.navigateTo
<!-- index.vue -->
<template><view class="home "><button @click="toTest1"></button></view></template><script>export default {data() {return {}},methods: {toTest1() {uni.navigateTo({url:'/pages/test1/test1'})}}}
</script>
二、switchTab
这里我们在test1页面中想点击按钮跳转到index页面
<template><view class="home "><button @click="toIndex"></button></view></template><script>export default {data() {return {}},methods: {toIndex() {uni.switchTab({url:'/pages/index/index'})}}}
</script>
如果要从成功后跳转到tabBar页面只能用switchTab
success: (res) => {console.log(res.data.status, '状态');if (res.data.status == 1) {this.msgType = 'success'this.messageText = '更新成功'this.$refs.message.open()uni.switchTab({url: '/pages/index/index'})} else {this.msgType = 'error'this.messageText = '更新失败'this.$refs.message.open()}