前言
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=/
以上就是本文的全部內容。透過本文的學習，相信大家已經掌握瞭如何在Uniapp中實現跳轉後返回不刷新的效果。希望對大家有幫助。
以上是uniapp如何跳轉後返回不刷新的詳細內容。更多資訊請關注PHP中文網其他相關文章！
