uniapp隱藏目前頁面不關閉

隨著行動開發技術的不斷發展，跨平台開發工具越來越成熟和完善。其中，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')
  },
    // 其他路由配置...
   ]
})

2. 在需要隱藏目前頁面的地方，使用this. $router.push 實作路由跳轉

this.$router.push({ path: '/home', query: { isHide: true }})

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

3. 在隱藏的頁面中，使用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')

2. 在父元件中使用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中文網其他相關文章！