uniapp hides the current page without closing it

With the continuous development of mobile development technology, cross-platform development tools are becoming more and more mature and perfect. Among them, UniApp is one of the most popular cross-platform mobile development frameworks in China. It has the characteristics of high efficiency, simplicity, and ease of use, making it the best choice for developers.

In development, we often encounter some needs that require the current page to be hidden but not closed. For example, after opening a new page, we need to hide the current page. At this time, we need to master some skills to achieve this function.

1. Routing mode of vue-router

First of all, what we need to know is that uniapp is based on the Vue framework, and vue-router is used in the Vue framework to implement routing jumps, so we can The function of hiding the current page is implemented through the routing mode of vue-router. The specific method is as follows:

1. Set the routing mode to history in the router/index.js file

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. Use this where you need to hide the current page. $router.push implements route jump

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

The query parameter is an object used to pass some data. Here we set an isHide field to mark the parameters that need to hide the current page.

3. In the hidden page, use watch to monitor routing changes

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

Here, watch is used to monitor routing changes. When isHide is true, modify the style of the current page so that Its hidden.

2. Use the v-show command in Vue

In addition to using vue-router to implement routing jumps to hide the current page, we can also use the v-show command in Vue to achieve simple implementation . The specific method is as follows:

1. Where the current page needs to be hidden, use $emit to trigger a custom event

this.$emit('hide')

2. Use the v-show directive in the parent component To control the current page

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

Here we trigger a custom event through $emit and listen to the event in the parent component to achieve the function of hiding the current page. We can control whether to display the current page by controlling the value of the showCurrentPage variable. At the same time, we can also use this method to control whether to display a new page.

Summary

Through Vue-router’s routing mode and v-show directive, we can easily implement the function of hiding the current page. Of course, the specific implementation method still needs to be adjusted according to actual needs.

It should be noted that when using the above method to hide the current page, the memory of the current page will not be released. Therefore, if the current page is no longer needed, it is best to destroy it manually to avoid the occurrence of memory leaks. .

The above is the detailed content of uniapp hides the current page without closing it. For more information, please follow other related articles on the PHP Chinese website!