前言
Uniapp作为一个跨平台的开发框架，已经被越来越多的开发者所接受和使用。在Uniapp中，页面跳转是非常常见的操作，在进行页面跳转后，有时候需要保留原页面的状态，以便下一次回到这个页面时不需要重新加载数据，也不需要重新进行一些复杂的操作。那么，如何在Uniapp中实现跳转后返回不刷新的效果呢？本文将为大家详细介绍。
Uniapp页面跳转
在Uniapp中进行页面跳转，我们通常使用uni.navigateTo或uni.redirectTo方法，它们的具体区别如下：
- uni.navigateTo
使用uni.navigateTo方法进行页面跳转时，会在当前页面的栈顶添加一个新的页面，这个新的页面会覆盖掉当前页面的一部分，如下图所示：
可以看到，我们在A页面中使用uni.navigateTo跳转到了B页面，在B页面中添加了一个新的内容，这个内容会出现在A页面的上面，并且当我们返回到A页面时，B页面会被销毁，整个过程就像一个栈结构一样。
- uni.redirectTo
与uni.navigateTo不同的是，使用uni.redirectTo进行页面跳转时，会将当前页面删掉，然后跳转到一个新的页面，如下图所示：
可以看到，我们在A页面中使用uni.redirectTo跳转到了B页面，在B页面中添加了一个新的内容，但是当我们返回到A页面时，B页面已经被销毁了，整个过程就像一个队列一样。
如何实现跳转后返回不刷新
通过上面的介绍，我们可以知道，当我们需要跳转后返回不刷新的效果时，不能直接使用uni.navigateTo或uni.redirectTo方法，因为这两个方法都会销毁跳转前的页面。那么，该如何实现呢？
实现思路：
通过uni.switchTab或uni.reLaunch方法前往指定页面，这两个方法都有一个特点，就是无论怎么跳转，都会刷新页面，所以要注意在这里不能使用uni.navigateTo或uni.redirectTo方法。
在需要跳转的页面中添加一个tabBar选项卡，这个选项卡的路由地址要与uni.switchTab或uni.reLaunch前往的页面路由地址相同，这样，当我们点击这个选项卡时，就会跳转到指定页面，并且保留跳转前的页面状态。
实现步骤：
- 在manifest.json文件中添加tabBar选项卡
"tabBar": {
"color": "#999",
"selectedColor": "#007AFF",
"borderStyle": "black",
"backgroundColor": "#FFFFFF",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/img/tabBar/home.png",
"selectedIconPath": "static/img/tabBar/home-selected.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "static/img/tabBar/mine.png",
"selectedIconPath": "static/img/tabBar/mine-selected.png"
}
]
},在manifest.json文件中添加了tabBar选项卡，其中包含两个页面，分别是首页和我的页面。
- 在跳转前的页面中添加一个按钮，点击时跳转到指定页面
<template>
<view class='container'>
<view class='content'>
<button class='button' @click='jumpToMine'>跳转到我的页面</button>
</view>
</view>
</template>
<script>
export default {
methods: {
jumpToMine() {
uni.switchTab({ //注意这里使用了switchTab方法
url: '/pages/mine/mine'
})
}
}
}
</script>
<style>
.container {
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
.content {
margin-top: 100px;
text-align: center;
}
.button {
width: 200px;
height: 50px;
background-color: #007AFF;
color: #FFFFFF;
border: none;
border-radius: 10px;
}
</style>通过添加一个按钮，点击时使用uni.switchTab方法跳转到我的页面，这里要注意，不能使用uni.navigateTo或uni.redirectTo方法。
- 在我的页面中添加一个tabBar选项卡
<template>
<view class='container'>
<view class='content'>
我的页面
</view>
<view class='tabBar'>
<view class='tabBarItem' @click='jumpToHome'>
<text class='tabBarIcon'>首页</text>
</view>
<view class='tabBarItem tabBarItem-selected'>
<text class='tabBarIcon'>我的</text>
</view>
</view>
</view>
</template>
<script>
export default {
methods: {
jumpToHome() {
uni.switchTab({
url: '/pages/index/index'
})
}
}
}
</script>
<style>
.container {
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
.content {
margin-top: 100px;
text-align: center;
}
.tabBar {
position: fixed;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50px;
padding: 5px;
background-color: #FFFFFF;
border-top: solid 1px #DDDDDD;
}
.tabBarItem {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 14px;
color: #999;
}
.tabBarItem-selected {
color: #007AFF;
}
.tabBarIcon {
font-size: 14px;
}
</style>在我的页面中，我们添加了一个tabBar选项卡，这个选项卡包含两个tabBarItem，分别是首页和我的，其中我的这个选项卡被设为选中状态。
- 效果演示
这里给大家展示一下效果：
https://img-blog.csdn.net/20190118135008629?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jsb2dwYW5fY2xvdWQ=/
以上就是本文的全部内容。通过本文的学习，相信大家已经掌握了如何在Uniapp中实现跳转后返回不刷新的效果。希望对大家有所帮助。
