小程序中的页面跳转

在之前网页的学习中，我们往往采用超链接，或者定义方法、函数等方式来实现页面的跳转，但是微信小程序中没有超链接，那我们该如何实现呢？微信小程序的页面跳转包括两个，一个是tabBar页面的跳转，一个是非tabBar页面的跳转

1.跳转到tabBar页面

使用的代码

html 复制代码

uni.switchTab({})

html代码

html 复制代码

<template>
	<view>
		<view>
			<button>欣赏小姐姐</button>
		</view>
	</view>
</template>

js代码

html 复制代码

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 定义跳转方法
			turn1() {
				// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
				uni.switchTab({
					// person.vue页面路径
					url: "/pages/person/person"
				})
			}
		}
	}
</script>

调用方法

html 复制代码

<template>
	<view>
		<view>
			<button @click="turn1()">欣赏小姐姐</button>
		</view>
	</view>
</template>

完整代码：

html 复制代码

<template>
	<view>
		<view>
			<button @click="turn1()">欣赏小姐姐</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 定义跳转方法
			turn1() {
				// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
				uni.switchTab({
					// person.vue页面路径
					url: "/pages/person/person"
				})
			}
		}
	}
</script>

<style>

</style>

uni.switchTab(OBJECT)方法的具体讲解可在uni-app官网中查看，在"API"中找到"页面和路由"，再找到"uni.switchTab"

2.跳转到非tabBar页面

代码：

html 复制代码

uni.navigateTo({})

html代码：

html 复制代码

<template>
	<view>
		<view>
			<button>打开新页面</button>
		</view>
	</view>
</template>

js代码：

html 复制代码

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 定义跳转方法
			turn2(){
			    //保留当前页面，跳转到应用内的某个页面
				uni.navigateTo({
                    //new.vue页面路径
					url:"/pages/new/new"
				})
			}
		}
	}
</script>

调用方法

html 复制代码

<template>
	<view>
		<view>
			<button @click="turn2()">打开新页面</button>
		</view>
	</view>
</template>

完整代码

html 复制代码

<template>
	<view>
		<view>
			<button @click="turn2()">打开新页面</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
            // 定义跳转方法
			turn2(){
                 //保留当前页面，跳转到应用内的某个页面
				uni.navigateTo({
                    //new.vue页面路径
					url:"/pages/new/new"
				})
			}
		}
	}
</script>

<style>

</style>

uni.navigateTo(OBJECT)方法的具体讲解可在uni-app官网中查看，在"API"中找到"页面和路由"，再找到"uni.navigateTo"