# 导航栏不默认返回好麻烦 更新于2022/1/26 ----- 自2.0.19以后增加属性autoBack，可以满足默认返回的需求，只需要简单的二次封装就可以。 > 本文作者：不爱喝橙子汁 ----- ## 原文章 --- 问就是**设计如此**，不过这也确实是痛点，所以本文提供二次封装的思路。 ```vue <template> <u-navbar :bgColor="backgroundColor" v-bind="$attrs" safeAreaInsetTop @rightClick="$emit('rightClick', $event)" @leftClick="onLeftClick($event)"> <template v-slot:left v-if="noBack"> <view></view> </template> </u-navbar> </template> <script> export default { inheritAttrs: false, // 必须，防止属性绑定在根节点上 props: { noBack: { type: Boolean, default: false } }, computed: { backgroundColor() { return '#fff'; } }, methods: { onLeftClick($event) { if (this.$listeners.back) { // 如果外界有监听@back事件则触发，否则直接返回 this.$emit('back', $event); } else { uni.navigateBack(); } } } }; </script> ``` 1. $attrs表示所有写在组件上但未被prop指明接收但集合 2. $listeners表示外界在这个组件上所有监听的事件。 这样当你不在组件上订阅@back事件时，组件就会默认返回上一页，而如果你想自己处理返回事件，只要处理@back事件就可以了，它会自动阻止默认行为。 但是你**最好认为他们仅在H5平台上有效**，它有兼容性问题，比如微信小程序上就没有这两个属性。 > 本文作者： 不爱喝橙子汁