uniapp的两个跳转方式

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





二、switchTab

这里我们在test1页面中想点击按钮跳转到index页面





如果要从成功后跳转到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()
							}

你可能感兴趣的:(uni-app,前端)