uniapp的两个跳转方式

uniapp内置多种跳转方式，我这里介绍两个最常用的跳转，uni.navigateTo和uni.switchTab，前者为跳转到非TabBar页面，后者为跳转到TabBar页面，所谓TabBar就是底部导航栏配置的页面，例如下方的index.vue。

配置成导航栏的页面无法通过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>