uniapp怎么去除子页面的左侧返回

1. 前言

Uniapp是一款基于Vue.js框架的多端开发工具，支持以一套代码同时编译成H5、小程序、APP等多个平台。在开发过程中，经常需要在一个页面中嵌入子页面，但是有时候需要去掉这些子页面的左侧返回按钮，本文将介绍在Uniapp中如何去除子页面的左侧返回。

2. 子页面左侧返回的实现方法

2.1 通过uni.navigateTo方法实现

在Uniapp中，可以通过uni.navigateTo方法进行子页面跳转，在跳转时可以设置子页面的参数，例如：

uni.navigateTo({

  url: '/pages/subPage/subPage?id=1'
})

在上述代码中，跳转到子页面的路径为'/pages/subPage/subPage'，并且通过'id=1'将参数传递到子页面中。在子页面的vue文件中，可以通过$root.$mp.query获取传递的参数，例如：

export default {

  mounted() {
    console.log(this.$root.$mp.query) // { id: 1 }
  }
}

然而，通过uni.navigateTo方法跳转到子页面时，子页面会自动在左侧生成一个返回按钮。

2.2 通过vue-router实现

在Uniapp中，也可以通过vue-router实现子页面的跳转和传递参数，例如：

this.$router.push({

  name: 'subPage',
  params: {
    id: 1
  }
})

在上述代码中，跳转到子页面的名称为'subPage'，并且通过'params'将id参数传递到子页面中。在子页面的vue文件中，可以通过$route.params获取传递的参数，例如：

export default {

  mounted() {
    console.log(this.$route.params) // { id: 1 }
  }
}

和uni.navigateTo方法一样，通过vue-router实现子页面跳转时，子页面也会自动在左侧生成一个返回按钮。

2.3 通过自定义NavigationBar实现

在Uniapp中，可以通过自定义NavigationBar的方式去除子页面左侧返回按钮。具体实现方式如下：

export default {

  onNavigationBarButtonTap() {
    uni.navigateBack()
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '子页面'
    })
    uni.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#ffffff'
    })
    uni.hideBackHome()
  }
}

在上述代码中，通过onNavigationBarButtonTap方法将NavigationBar的左侧按钮点击事件绑定到uni.navigateBack()，这样点击左侧按钮的时候就会返回上一页。另外，通过uni.setNavigationBarTitle和uni.setNavigationBarColor方法设置NavigationBar的标题和颜色，通过uni.hideBackHome方法将NavigationBar的左侧返回按钮和首页按钮隐藏。

3. 小结

本文介绍了在Uniapp中如何去除子页面的左侧返回按钮，包括通过uni.navigateTo方法、vue-router和自定义NavigationBar三种方式。开发者可以根据实际需求选择不同的方法来实现。