小程序中的页面跳转

小程序中的页面跳转

在之前网页的学习中,我们往往采用超链接,或者定义方法、函数等方式来实现页面的跳转,但是微信小程序中没有超链接,那我们该如何实现呢?微信小程序的页面跳转包括两个,一个是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"

相关推荐
鸭鸭梨吖4 小时前
微信小程序---下拉框
微信小程序·小程序
mon_star°7 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero7 小时前
微信小程序91~100
微信小程序·小程序
假装我不帅7 小时前
微信小程序下拉加载更多实现
微信小程序·小程序
2301_805962937 小时前
微信小程序控制空调之微信小程序篇
微信小程序·小程序
Ama_tor13 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
一只一只妖1 天前
uniapp小程序无感刷新token
前端·小程序·uni-app
编程毕设1 天前
基于小程序的智能停车管理系统设计与开发
小程序
Kelaru1 天前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project