uniapp隐藏当前页面不关闭

随着移动开发技术的不断发展，跨平台开发工具越来越成熟和完善。其中，UniApp作为目前国内最流行的跨平台移动开发框架之一，具备了高效、简单、易用等特点，成为开发者们的不二之选。

在开发中，我们经常会遇到一些需要隐藏当前页面但不关闭的需求。比如，我们在打开一个新页面后，需要将当前页面隐藏起来，这时候我们就需要掌握一些技巧来实现这个功能。

一、vue-router 的路由模式

首先，我们需要知道的是uniapp是基于Vue框架的，而Vue框架中使用vue-router实现路由跳转，因此我们可以通过vue-router的路由模式来实现隐藏当前页面的功能。具体做法如下：

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

登录后复制

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

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

登录后复制

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

在隐藏的页面中，使用 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指令来简单实现。具体做法如下：

在需要隐藏当前页面的地方，使用 $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变量的值来控制是否显示当前页面。同时，我们也可以使用该方法来控制是否显示新的页面。

总结

通过Vue-router的路由模式和v-show指令，我们可以轻松地实现隐藏当前页面的功能。当然，具体实现方法还需要根据实际需求进行调整。

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

以上就是uniapp隐藏当前页面不关闭的详细内容，更多请关注Work网其它相关文章！