uniapp tiene una variedad de métodos de salto incorporados. Aquí presentaré los dos saltos más utilizados, uni.navigateTo y uni.switchTab. El primero salta a páginas que no son TabBar y el segundo salta a páginas TabBar. llamado TabBar es la página de configuración de columnas de navegación inferior, como index.vue a continuación.
en páginas.json
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/buliangzhu.png",
"selectedIconPath": "static/zhuyeliang.png"
},
{
"pagePath": "pages/user/user",
"text": "个人中心",
"iconPath": "static/user2.png",
"selectedIconPath": "static/user1.png"
}
]
},Las páginas configuradas como barras de navegación no se pueden saltar mediante el método navegarTo , sino solo mediante el método switchTab.
1. Navegar a
Por ejemplo, si necesitamos saltar a test1.vue en la página index.vue y test1 es una página que no es tabBar , podemos agregar un evento de clic al botón que debe vincularse al evento. Luego escriba un método en métodos y llame a 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>
2. cambiar pestaña
Aquí queremos hacer clic en el botón en la página test1 para saltar a la página de índice.
<template>
<view class="home ">
<button @click="toIndex"></button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
toIndex() {
uni.switchTab({
url:'/pages/index/index'
})
}
}
}
</script>
Si desea saltar a la página de la barra de pestañas después del éxito, solo puede usar switchTab.
success: (res) => {
console.log(res.data.status, '状态');
if (res.data.status == 1) {
this.msgType = 'success'
this.messageText = '更新成功'
this.$refs.message.open()
uni.switchTab({
url: '/pages/index/index'
})
} else {
this.msgType = 'error'
this.messageText = '更新失败'
this.$refs.message.open()
}