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