diff --git a/src/packages/tabbar/doc.md b/src/packages/tabbar/doc.md index 46b4267a41c6544dad0834a3697fe8e63627e0d9..ea9294cb5c7564123214baf42757d18297ecf236 100644 --- a/src/packages/tabbar/doc.md +++ b/src/packages/tabbar/doc.md @@ -68,7 +68,7 @@ export default { **重要提示** -组件中的 curr 属性相当于默认的选中tab,如果tabbar组件被应用于跳转路由,若tabbar没有按照预想的选中高亮的话,请注意,一般是因为重新渲染了tabbar组件导致的,解决方法如下: +组件中的 curr 属性相当于默认的选中tab,如果tabbar组件被应用于跳转路由,设置 isRouter = true ,若tabbar没有按照预想的选中高亮的话,请注意,一般是因为重新渲染了tabbar组件导致的,解决方法如下: - 方法1、通过监听切换事件 @tab-switch 改变传入数据 tabList 中想要高亮对象的 curr 值为 true; - 方法2、把 tabbar 组件放在路由层级之外,令其独立出来,避免点击 tabbar 会重新渲染该组件; @@ -83,6 +83,7 @@ export default { | tabbar-list | 渲染数据 | Array | [] | bottom | 是否固定在页面底部 |Boolean|false| | replace | replace为true的时候,跳转url以替换的形式进行 |Boolean|false| +| isRouter | 是否为vue路由跳转形式,区别于H5的web跳转|Boolean|false| ### tabbar-list diff --git a/src/packages/tabbar/tabbar.vue b/src/packages/tabbar/tabbar.vue index 88e666456b748b916769e820c7c9991a4680ffb3..21468804ac493cd4089171268709a9d4f2a8e912 100644 --- a/src/packages/tabbar/tabbar.vue +++ b/src/packages/tabbar/tabbar.vue @@ -40,6 +40,10 @@ export default { type: Boolean, default: false, }, + isRouter: { + type: Boolean, + default: false, + }, }, data() { return { @@ -71,10 +75,10 @@ export default { this.currIndex = index; if (this.replace) { //替换url - window.location.replace(value.href); + this.isRouter ? this.$router.replace(value.href) : window.location.replace(value.href); } else { if (value.href) { - window.location.href = value.href; + this.isRouter ? this.$router.push(value.href) : (window.location.href = value.href); } } this.$emit('tab-switch', value, index);