uniapp如何跳转后返回不刷新
前言
Uniapp作为一个跨平台的开发框架，已经被越来越多的开发者所接受和使用。在Uniapp中，页面跳转是非常常见的操作，在进行页面跳转后，有时候需要保留原页面的状态，以便下一次回到这个页面时不需要重新加载数据，也不需要重新进行一些复杂的操作。那么，如何在Uniapp中实现跳转后返回不刷新的效果呢？本文将为大家详细介绍。
Uniapp页面跳转
在Uniapp中进行页面跳转，我们通常使用uni.navigateTo或uni.redirectTo方法，它们的具体区别如下：
使用uni.navigateTo方法进行页面跳转时，会在当前页面的栈顶添加一个新的页面，这个新的页面会覆盖掉当前页面的一部分，如下图所示：
可以看到，我们在A页面中使用uni.navigateTo跳转到了B页面，在B页面中添加了一个新的内容，这个内容会出现在A页面的上面，并且当我们返回到A页面时，B页面会被销毁，整个过程就像一个栈结构一样。
与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前往的页面路由地址相同，这样，当我们点击这个选项卡时，就会跳转到指定页面，并且保留跳转前的页面状态。
实现步骤：
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方法。
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=/
无论是在移动网页还是在App中，用户在使用过程中经常会遇到需要进行页面跳转的情况。但是，这种跳转常常会造成页面重新渲染，影响用户体验。uniapp提供了一个非常方便的解决方案，即通过uni-app路由的配置，实现极简单的无感页面跳转。
1. uni-app路由
uni-app路由是指将链接与vue组件的关系映射到一个对象中的机制。基于uni-app路由机制，开发者可非常方便地实现在vue组件间进行跳转。例如，可以通过uni-app路由机制在页面之间切换，也可以在同一页面之内切换不同的组件。
2. 配置路由
在uni-app的开发过程中，需要在project.config.json文件中进行路由的配置。为了实现无感页面跳转，需要将keepAlive参数设置为true。具体的代码如下：
```
\"pages\": [
{
\"path\": \"pages/index/index\",
\"style\": {
\"navigationBarTitleText\": \"首页\"
},
\"config\": {
\"keepAlive\": true
}
}
]
```
3. 实现页面跳转
有了路由机制和配置之后，实现页面的跳转非常简单。只需在Vue组件中使用uni-app提供的封装组件，调用uni-navigate-to或uni-replace-navigate组件即可实现跳转。相比于传统的跳转方案，不需要额外处理路由的问题，在使用过程中更加方便快捷。
总结
在uniapp中，实现无感页面跳转非常简单，只需要配置uni-app路由的参数keepAlive，并通过uni-app的封装组件实现页面的跳转即可。这种方案不仅能够提高用户体验，还能够提高应用的性能。因此，对于需要频繁进行页面跳转的应用，采用这种方案可以获得更好的效果。
