How to close a page in uniapp

Uniapp is a cross-platform development framework that allows developers to write applications for iOS, Android, H5 and other platforms at the same time, greatly improving development efficiency and saving development costs. In the process of developing Uniapp applications, it is often necessary to implement the function of closing a certain page. This article will introduce how to close a specified page in Uniapp.

1. Close the page through page stack management

In the Uniapp application, page jumps are implemented through page stack management. The page stack is a data structure used to store the jump relationship between pages. Whenever you jump to a new page, the page will be added to the top of the page stack. When you return from the page or close the page, The page will be popped from the page stack. Therefore, the function of closing the specified page can be realized by operating the page stack.

Uniapp provides multiple APIs to manage page stacks, the most commonly used of which are uni.navigateBack and uni.reLaunch. uni.navigateBack is used to close the current page and return to the previous page, and uni.reLaunch is used to close all pages and jump to a certain page of the application. However, these two APIs do not support directly closing the specified page. Therefore, it is necessary to combine the API uni.getCurrentPages for obtaining page stack information to realize the function of closing the specified page.

uni.getCurrentPages is used to obtain the information of the current page stack and return an array containing all page objects. The last element of the array is the current page object. By looping through the page objects in this array, find the index of the page object that needs to be closed and use uni.navigateBack or uni.reLauch to close the page.

The following is a sample code:

function closePage(pageName) {
  const pages = getCurrentPages();
  const len = pages.length;
  for (let i = 0; i < len; i++) {
    const page = pages[i];
    if (page.route === pageName) {
      const delta = len - i - 1;
      uni.navigateBack({
        delta: delta,
      });
      break;
    }
  }
}

This sample code defines a closePage function, which receives the name of the page that needs to be closed, pageName, as a parameter. First, obtain the current page stack information through uni.getCurrentPages, then traverse the page object array, find the page object whose route attribute is equal to pageName, calculate how many levels of pages need to be returned, and finally use uni.navigateBack to close the target page.

2. Close the page through the event bus

The event bus is a model widely used in front-end development to achieve communication between components. In Uniapp, the event bus can also be used to implement communication between pages, including the function of closing a specified page.

To implement the event bus, you need to use the responsive mechanism of vue.js. By creating a global vue instance as the event bus, other components or pages can trigger and monitor respectively through the $emit and $on methods of the instance. event. Parameters can be passed when triggering the event, and the listening event will receive the parameters carried by the event and can handle it accordingly.

The following is a sample code:

// event-bus.js
import Vue from 'vue';
export default new Vue();

// Page1.vue
import eventBus from '@/event-bus';
export default {
  methods: {
    onClosePage() {
      eventBus.$emit('closePage', 'Page2');
    },
  },
}

// Page2.vue
import eventBus from '@/event-bus';
export default {
  created() {
    eventBus.$on('closePage', (pageName) => {
      if (this.$options.name === pageName) {
        uni.navigateBack();
      }
    });
  },
}

In this sample code, an eventBus instance is first created to serve as the event bus. Then in the Page1 page, when the Page2 page needs to be closed, eventBus.$emit is used to trigger the event. The event name is 'closePage' and the name of the page that needs to be closed is passed. In the Page2 page, listen to the event 'closePage' and get the name of the current page component through this.$options.name. When the name is equal to the page name pageName passed by the event, use uni.navigateBack to close the current page.

In short, Uniapp provides a variety of ways to realize the function of closing the specified page, and you can choose the appropriate method according to the specific business scenario. Personally, I think closing the page is a relatively simple and intuitive way through page stack management and combining with uni.getCurrentPages API. More flexible communication between pages can be achieved through the event bus, but it needs to be used moderately to avoid event pollution and unnecessary performance problems.

The above is the detailed content of How to close a page in uniapp. For more information, please follow other related articles on the PHP Chinese website!