uniapp은 현재 페이지를 닫지 않고 숨깁니다.
모바일 개발 기술이 지속적으로 발전함에 따라 크로스 플랫폼 개발 도구는 점점 더 성숙해지고 완벽해지고 있습니다. 그 중 UniApp은 중국에서 가장 인기 있는 크로스 플랫폼 모바일 개발 프레임워크 중 하나입니다. 높은 효율성, 단순성 및 사용 용이성을 갖추고 있어 개발자에게 최고의 선택입니다.
개발 중에 현재 페이지를 숨겨야 하지만 닫혀서는 안 되는 요구 사항이 종종 발생합니다. 예를 들어, 새 페이지를 연 후 현재 페이지를 숨겨야 하는 경우 이 기능을 수행하려면 몇 가지 기술을 익혀야 합니다.
1. vue-router의 라우팅 모드
먼저 알아야 할 것은 uniapp은 Vue 프레임워크를 기반으로 하며, vue-router는 Vue 프레임워크에서 경로 점프를 구현하는 데 사용된다는 것입니다. vue-router의 라우팅 모드를 사용하여 현재 페이지를 숨기는 기능을 구현하세요. 구체적인 방법은 다음과 같습니다.
- 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') }, // 其他路由配置... ] })
- 현재 페이지를 숨겨야 하는 경우 this.$router.push를 사용하여 경로 점프를 구현합니다
this.$router.push({ path: '/home', query: { isHide: true }})
어디, 쿼리 매개변수는 일부 데이터를 전달하는 데 사용되는 개체입니다. 여기서는 현재 페이지를 숨겨야 하는 매개변수를 표시하기 위해 isHide 필드를 설정했습니다.
- 숨겨진 페이지에서 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 명령을 사용할 수도 있습니다. 구체적인 방법은 다음과 같습니다.
- $emit를 사용하여 현재 페이지를 숨겨야 하는 사용자 정의 이벤트를 트리거합니다.
this.$emit('hide')
- 상위 구성 요소에서 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











이 기사는 UNI-APP의 로컬 스토리지 API (uni.setStoragesYnc (), uni.getStoragesYnc () 및 해당 비동기 상대방)에 대해 자세히 설명하고 설명 키 사용, 데이터 크기 제한 및 JSON 구문 분석 처리와 같은 모범 사례를 강조합니다. 그것은 lo를 강조합니다

이 기사는 직접 API 지원이 부족하여 UniAPP에서 다운로드 된 파일을 바꾸기위한 해결 방법에 대해 자세히 설명합니다. Android/iOS에는 사후 다운로드 라이닝 용 기본 플러그인이 필요하고 H5 솔루션은 파일 이름을 제안하는 것으로 제한됩니다. 과정에는 시간이 포함됩니다

이 기사는 UniAPP 다운로드에서 파일 인코딩 문제를 다룹니다. 서버 측 컨텐츠 유형 헤더의 중요성과 이러한 헤더를 기반으로 클라이언트 측 디코딩에 JavaScript의 TextDecoder를 사용합니다. 공통 인코딩 프로브를위한 솔루션

이 기사는 Uni.getLocation ()에 중점을 둔 UNI-APP의 지리 위치 API에 대해 자세히 설명합니다. 잘못된 좌표 시스템 (GCJ02 vs. WGS84) 및 권한 문제와 같은 일반적인 함정을 다룹니다. 평균 판독 값 및 핸들링을 통해 위치 정확도 향상

이 기사는 UNI.Request 또는 Axios를 사용하여 UNI-APP 내에서 API 요청을 작성하고 보호합니다. JSON 응답 처리, 최상의 보안 관행 (HTTPS, 인증, 입력 검증), 문제 해결 장애 (네트워크 문제, CORS, S

이 기사는 UNI-APP의 국가 관리를 위해 Vuex와 Pinia를 비교합니다. Pinia의 단순성과 Vuex의 구조를 강조하는 기능, 구현 및 모범 사례를 자세히 설명합니다. 선택은 Pinia Suita와 함께 프로젝트 복잡성에 달려 있습니다

이 기사에는 Uni.share API를 사용하여 소셜 공유를 UNI-APP 프로젝트에 통합하는 방법에 대해 자세히 설명합니다. Share API, WeChat 및 Weibo와 같은 플랫폼에서 설정, 구성 및 테스트를 다룹니다.

이 기사에서는 Uni-App의 Easycom 기능, 구성 요소 등록 자동화를 설명합니다. Autoscan 및 사용자 정의 구성 요소 매핑을 포함한 구성에 대해 자세히 설명하고, 보일러 플레이트 감소, 속도 향상 및 가독성 향상과 같은 이점을 강조 표시합니다.
