uniapp masque la page actuelle sans la fermer

Avec le développement continu de la technologie de développement mobile, les outils de développement multiplateformes deviennent de plus en plus matures et parfaits. Parmi eux, UniApp est actuellement l'un des frameworks de développement mobile multiplateformes les plus populaires en Chine. Il présente les caractéristiques d'une grande efficacité, d'une simplicité et d'une facilité d'utilisation, ce qui en fait le meilleur choix pour les développeurs.

En développement, nous rencontrons souvent certains besoins qui nécessitent de masquer la page en cours mais pas de la fermer. Par exemple, après avoir ouvert une nouvelle page, nous devons masquer la page actuelle. À ce stade, nous devons maîtriser certaines compétences pour réaliser cette fonction.

1. Mode de routage de vue-router

Tout d'abord, ce que nous devons savoir, c'est qu'uniapp est basé sur le framework Vue et que vue-router est utilisé dans le framework Vue pour implémenter les sauts de routage, afin que nous puissions implémenter la fonction de masquage de la page actuelle via le mode de routage de vue-router. La méthode spécifique est la suivante :

1. Définissez le mode de routage dans le fichier router/index.js sur 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. Lorsque vous devez masquer le courant Sur la page, utilisez this.$router.push pour implémenter le saut d'itinéraire

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

Le paramètre de requête est un objet utilisé pour transmettre certaines données. Ici, nous définissons un champ isHide pour marquer les paramètres qui doivent masquer la page actuelle.

3. Dans la page cachée, utilisez la montre pour surveiller les changements d'itinéraire

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

Utilisez la montre ici pour surveiller les changements d'itinéraire Lorsque isHide est vrai, modifiez. Stylisez la page actuelle pour la masquer.

2. Utilisez la commande v-show dans Vue

En plus d'utiliser vue-router pour implémenter des sauts de routage pour masquer la page actuelle, nous pouvons également utiliser v-show dans Vue Instructions à implémenter simplement. La méthode spécifique est la suivante :

1. Là où la page actuelle doit être masquée, utilisez $emit pour déclencher un événement personnalisé

this.$emit('hide')

# 🎜🎜# dans le parent La directive v-show est utilisée dans le composant pour contrôler la page actuelle

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

Ici, nous déclenchons un événement personnalisé via $emit et écoutons l'événement dans le composant parent pour réaliser la fonction de masquer la page actuelle. Nous pouvons contrôler s'il faut afficher la page actuelle en contrôlant la valeur de la variable showCurrentPage. Dans le même temps, nous pouvons également utiliser cette méthode pour contrôler l’affichage ou non d’une nouvelle page.
Summary
Grâce au mode de routage de Vue-router et à la directive v-show, nous pouvons facilement implémenter la fonction de masquage de la page actuelle. Bien entendu, les modalités spécifiques de mise en œuvre doivent encore être adaptées en fonction des besoins réels.
Il convient de noter que lorsque vous utilisez la méthode ci-dessus pour masquer la page actuelle, la mémoire de la page actuelle ne sera pas libérée. Par conséquent, si la page actuelle n'est plus nécessaire, il est préférable de le faire. détruisez-le manuellement pour éviter les fuites de mémoire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!