当前位置：首页 > news >正文

小程序中的页面跳转

news 来源：原创 2025/5/1 6:51:30

小程序中的页面跳转

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

1.跳转到tabBar页面

使用的代码

uni.switchTab({})

html代码

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

js代码

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

调用方法

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

完整代码：

<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页面

代码：

uni.navigateTo({})

html代码：

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

js代码：

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

调用方法

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

完整代码

<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>