随着移动开发技术的不断发展，跨平台开发工具越来越成熟和完善。其中，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 指令来控制当前页面
这里我们通过$emit触发自定义事件，在父组件中监听该事件，从而实现隐藏当前页面的功能。我们可以通过控制showCurrentPage变量的值来控制是否显示当前页面。同时，我们也可以使用该方法来控制是否显示新的页面。
总结
通过Vue-router的路由模式和v-show指令，我们可以轻松地实现隐藏当前页面的功能。当然，具体实现方法还需要根据实际需求进行调整。
需要注意的是，使用上述方法实现隐藏当前页面时，并不会释放当前页面的内存，因此如果当前页面不再需要使用时，最好手动进行销毁，避免内存泄漏的出现。
