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() }
