uniapp은 현재 페이지를 닫지 않고 숨깁니다.

모바일 개발 기술이 지속적으로 발전함에 따라 크로스 플랫폼 개발 도구는 점점 더 성숙해지고 완벽해지고 있습니다. 그 중 UniApp은 중국에서 가장 인기 있는 크로스 플랫폼 모바일 개발 프레임워크 중 하나입니다. 높은 효율성, 단순성 및 사용 용이성을 갖추고 있어 개발자에게 최고의 선택입니다.

개발 중에 현재 페이지를 숨겨야 하지만 닫혀서는 안 되는 요구 사항이 종종 발생합니다. 예를 들어, 새 페이지를 연 후 현재 페이지를 숨겨야 하는 경우 이 기능을 수행하려면 몇 가지 기술을 익혀야 합니다.

1. vue-router의 라우팅 모드

먼저 알아야 할 것은 uniapp은 Vue 프레임워크를 기반으로 하며, vue-router는 Vue 프레임워크에서 경로 점프를 구현하는 데 사용된다는 것입니다. vue-router의 라우팅 모드를 사용하여 현재 페이지를 숨기는 기능을 구현하세요. 구체적인 방법은 다음과 같습니다.

1. router/index.js 파일에서 라우팅 모드를 기록으로 설정

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

어디, 쿼리 매개변수는 일부 데이터를 전달하는 데 사용되는 개체입니다. 여기서는 현재 페이지를 숨겨야 하는 매개변수를 표시하기 위해 isHide 필드를 설정했습니다.

3. 숨겨진 페이지에서 watch를 사용하여 라우팅 변경 사항을 모니터링하세요.

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

여기에서 watch를 사용하여 라우팅 변경 사항을 모니터링하세요. isHide가 true인 경우 현재 페이지의 스타일을 수정하여 숨깁니다.

2. 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 변수의 값을 제어하여 현재 페이지를 표시할지 여부를 제어할 수 있습니다. 동시에 이 메서드를 사용하여 새 페이지를 표시할지 여부를 제어할 수도 있습니다.

Summary

Vue-router의 라우팅 모드와 v-show 지시문을 통해 현재 페이지를 숨기는 기능을 쉽게 구현할 수 있습니다. 물론 구체적인 구현 방법은 실제 필요에 따라 조정될 필요가 있습니다.

위 방법을 사용하여 현재 페이지를 숨길 경우 현재 페이지의 메모리가 해제되지 않으므로 현재 페이지가 더 이상 필요하지 않은 경우 메모리를 피하기 위해 수동으로 파기하는 것이 가장 좋습니다. 누출.

위 내용은 uniapp은 현재 페이지를 닫지 않고 숨깁니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!