首頁 web前端 uni-app uniapp隱藏目前頁面不關閉

uniapp隱藏目前頁面不關閉

May 22, 2023 am 10:17 AM

隨著行動開發技術的不斷發展,跨平台開發工具越來越成熟和完善。其中,UniApp作為目前國內最受歡迎的跨平台行動開發框架之一,具備了高效、簡單、易用等特點,成為開發者的最佳選擇。

在開發中,我們經常會遇到一些需要隱藏目前頁面但不關閉的需求。例如,我們在開啟一個新頁面後,需要將目前頁面隱藏起來,這時候我們需要掌握一些技巧來實現這個功能。

一、vue-router 的路由模式

首先,我們需要知道的是uniapp是基於Vue框架的,而Vue框架中使用vue-router實現路由跳轉,因此我們可以透過vue-router的路由模式來實現隱藏目前頁面的功能。具體做法如下:

  1. 在router/index.js 檔案中設定路由模式為history
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
   mode: 'history',
   routes: [
  {
     path: '/login',
     name: 'Login',
     component: () => import('@/views/Login/Login')
  },
    // 其他路由配置...
   ]
})
登入後複製
  1. 在需要隱藏目前頁面的地方,使用this. $router.push 實作路由跳轉
this.$router.push({ path: '/home', query: { isHide: true }})
登入後複製

其中,query參數為一個對象,用來傳遞一些資料。這裡我們設定一個isHide字段,用來標記需要隱藏目前頁面的參數。

  1. 在隱藏的頁面中,使用watch 監聽路由變化
watch: {
   '$route' () {
      if (this.$route.query.isHide) {
         this.$refs.currentView.style.display = 'none'
      }
   }
}
登入後複製

這裡使用watch 監聽路由變化,當isHide為true時,修改目前頁面的樣式,使其隱藏起來。

二、在Vue 中使用v-show 指令

除了使用vue-router實作路由跳轉來隱藏目前頁面,我們還可以採用Vue中的v-show指令來簡單實現。具體做法如下:

  1. 在需要隱藏目前頁面的地方,使用$emit 觸發自訂事件
this.$emit('hide')
登入後複製
  1. 在父元件中使用v-show 指令來控制目前頁面
<template>
  <div>
    <div v-show="showCurrentPage">
      <!-- 当前页面内容 -->
    </div>

    <div v-show="showNewPage">
      <!-- 新页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showCurrentPage: true, // 是否显示当前页面
      showNewPage: false // 是否显示新页面
    }
  },
  mounted () {
    // 监听自定义事件
    this.$on('hide', () => {
      this.showCurrentPage = false
    })
  }
}
</script>
登入後複製

這裡我們透過$emit觸發自訂事件,在父元件中監聽該事件,從而實現隱藏目前頁面的功能。我們可以透過控制showCurrentPage變數的值來控制是否顯示目前頁面。同時,我們也可以使用該方法來控制是否顯示新的頁面。

總結

透過Vue-router的路由模式和v-show指令,我們可以輕鬆實現隱藏目前頁面的功能。當然,具體實現方法還需要根據實際需求進行調整。

需要注意的是,使用上述方法實現隱藏當前頁面時,並不會釋放當前頁面的內存,因此如果當前頁面不再需要使用時,最好手動進行銷毀,避免內存洩漏的出現。

以上是uniapp隱藏目前頁面不關閉的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何處理Uni-App中的本地存儲? 如何處理Uni-App中的本地存儲? Mar 11, 2025 pm 07:12 PM

如何處理Uni-App中的本地存儲?

UniApp下載文件如何重命名 UniApp下載文件如何重命名 Mar 04, 2025 pm 03:43 PM

UniApp下載文件如何重命名

如何使用Uni-App的地理位置API? 如何使用Uni-App的地理位置API? Mar 11, 2025 pm 07:14 PM

如何使用Uni-App的地理位置API?

如何使用VUEX或PINIA在Uni-App中管理狀態? 如何使用VUEX或PINIA在Uni-App中管理狀態? Mar 11, 2025 pm 07:08 PM

如何使用VUEX或PINIA在Uni-App中管理狀態?

如何在Uni-App中提出API請求並處理數據? 如何在Uni-App中提出API請求並處理數據? Mar 11, 2025 pm 07:09 PM

如何在Uni-App中提出API請求並處理數據?

我如何使用Uni-App的社交共享API? 我如何使用Uni-App的社交共享API? Mar 13, 2025 pm 06:30 PM

我如何使用Uni-App的社交共享API?

UniApp下載文件如何處理文件編碼 UniApp下載文件如何處理文件編碼 Mar 04, 2025 pm 03:32 PM

UniApp下載文件如何處理文件編碼

如何使用Uni-App的EasyCom功能進行自動組件註冊? 如何使用Uni-App的EasyCom功能進行自動組件註冊? Mar 11, 2025 pm 07:11 PM

如何使用Uni-App的EasyCom功能進行自動組件註冊?

See all articles