Let’s talk about some methods for closing the uniapp page

Recently in mobile application development, uniapp has become an increasingly popular development framework. It is based on the Vue framework, which allows developers to easily and quickly develop native applications based on multiple platforms (such as Android and iOS). In the uniapp application, it may be difficult to close some pages. Therefore, this article will introduce some methods for closing the uniapp page to help developers better realize the functions of the application.

Method 1: Page jump through VueRouter

In uniapp, VueRouter can provide a router.go(n) to jump to the first n routes of the current route, that is, n= 1 is the current route, n=2 is the previous route, and so on. uniapp has made some improvements to this jump method and uses uni.navigateBack() in the APP to perform page rollback operations. In this way, no route will be recycled in the general single page application (SPA), and only the native APP can have the effect of closing the page.

// 利用uni.navigateBack(-1)来实现页面回退操作，其中-1表示回退到前一个页面。
uni.navigateBack(-1);

Method 2: Close the page through uniapp’s custom event

Uniapp also provides a custom event method, which can listen to an event in the component and perform the corresponding operation. The page closing effect can also be achieved through this method:

//子组件使用自定义事件来关闭页面，父组件直接调用$emit触发事件
//子组件代码
methods:{
  //点击调用子组件的关闭方法
  close(){
    this.$emit('close');
  }
}
//父组件代码
<template>
  <view>
      <child @close="close"/>
  </view>
</template>
<script>
export default {
  methods: {
    close() {
     uni.navigateBack(-1);
    }
  }
};
</script>

Method 3: Use Vue’s mixins feature to achieve page closing

There is a feature in Vue called Mixins, Mixins can mix an object into Go to the instance of the Vue component to implement the function of reusing objects. Mixins can be defined globally or individually in components. Here we define the page closing operation globally.

//在全局中编写一个mixin对象，调用close方法可以关闭当前页面
Vue.mixin({
  methods:{
    close(){
      uni.navigateBack(-1);
    }
  }
});

The above are the three methods to close the page in uniapp. Developers can choose a method that suits them based on actual needs. Hope this article can be helpful to you.

The above is the detailed content of Let’s talk about some methods for closing the uniapp page. For more information, please follow other related articles on the PHP Chinese website!