uniapp menyembunyikan halaman semasa tanpa menutupnya

Dengan pembangunan berterusan teknologi pembangunan mudah alih, alatan pembangunan merentas platform menjadi semakin matang dan sempurna. Antaranya, UniApp ialah salah satu rangka kerja pembangunan mudah alih merentas platform yang paling popular di China Ia mempunyai ciri kecekapan tinggi, kesederhanaan dan kemudahan penggunaan, menjadikannya pilihan terbaik untuk pembangun.

Semasa pembangunan, kami sering menghadapi beberapa keperluan yang memerlukan halaman semasa disembunyikan tetapi tidak ditutup. Sebagai contoh, selepas membuka halaman baru, kita perlu menyembunyikan halaman semasa Pada masa ini, kita perlu menguasai beberapa kemahiran untuk mencapai fungsi ini.

1. Mod penghalaan vue-router

Pertama sekali, apa yang perlu kita ketahui ialah uniapp adalah berdasarkan rangka kerja Vue dan vue-router digunakan dalam rangka kerja Vue untuk melaksanakan lompatan penghalaan, supaya kita boleh Fungsi menyembunyikan halaman semasa dilaksanakan melalui mod penghalaan vue-router. Kaedah khusus adalah seperti berikut:

1. Tetapkan mod penghalaan dalam fail penghala/index.js kepada sejarah

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. Di mana anda perlu menyembunyikan arus halaman, gunakan ini. $router.push melaksanakan lompatan penghalaan

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

di mana parameter pertanyaan ialah objek yang digunakan untuk menghantar beberapa data. Di sini kami menetapkan medan isHide untuk menandakan parameter yang perlu menyembunyikan halaman semasa.

3. Dalam halaman tersembunyi, gunakan jam tangan untuk memantau perubahan penghalaan

watch: {
   '$route' () {
      if (this.$route.query.isHide) {
         this.$refs.currentView.style.display = 'none'
      }
   }
}

Di sini, gunakan jam tangan untuk memantau perubahan penghalaan Apabila isHide adalah benar, ubah suai gaya semasa halaman supaya Ia tersembunyi.

2. Gunakan arahan v-show dalam Vue

Selain menggunakan vue-router untuk melaksanakan lompatan penghalaan untuk menyembunyikan halaman semasa, kita juga boleh menggunakan arahan v-show dalam Vue untuk mencapai pelaksanaan yang mudah. Kaedah khusus adalah seperti berikut:

1. Di mana halaman semasa perlu disembunyikan, gunakan $emit untuk mencetuskan acara tersuai

this.$emit('hide')

2. Gunakan v- tunjukkan arahan dalam komponen induk Untuk mengawal halaman semasa

<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>

Di sini kami mencetuskan acara tersuai melalui $emit dan mendengar acara dalam komponen induk untuk merealisasikan fungsi menyembunyikan halaman semasa. Kita boleh mengawal sama ada untuk memaparkan halaman semasa dengan mengawal nilai pembolehubah showCurrentPage. Pada masa yang sama, kami juga boleh menggunakan kaedah ini untuk mengawal sama ada untuk memaparkan halaman baharu.

Ringkasan

Melalui mod penghalaan Vue-router dan arahan v-show, kami boleh melaksanakan fungsi menyembunyikan halaman semasa dengan mudah. Sudah tentu, kaedah pelaksanaan khusus masih perlu diselaraskan mengikut keperluan sebenar.

Perlu diingatkan bahawa apabila menggunakan kaedah di atas untuk menyembunyikan halaman semasa, memori halaman semasa tidak akan dikeluarkan Oleh itu, jika halaman semasa tidak diperlukan lagi, lebih baik untuk memusnahkannya secara manual untuk mengelakkan kebocoran memori.

Atas ialah kandungan terperinci uniapp menyembunyikan halaman semasa tanpa menutupnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!