# 導航欄不默認返回好麻煩 更新于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平臺上有效**，它有兼容性問題，比如微信小程序上就沒有這兩個屬性。 > 本文作者： 不愛喝橙子汁