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')  },    // 其他路由配置...   ]})

1. 在需要隐藏当前页面的地方，使用 this.$router.push 实现路由跳转

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

其中，query参数为一个对象，用于传递一些数据。这里我们设置一个isHide字段，用来标记需要隐藏当前页面的参数。

1. 在隐藏的页面中，使用 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')

1. 在父组件中使用 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指令，我们可以轻松地实现隐藏当前页面的功能。当然，具体实现方法还需要根据实际需求进行调整。

需要注意的是，使用上述方法实现隐藏当前页面时，并不会释放当前页面的内存，因此如果当前页面不再需要使用时，最好手动进行销毁，避免内存泄漏的出现。