vue 解决刷新页面时，tabbar和页面不匹配的问题

最新推荐文章于 2023-03-29 15:23:16 发布

diCommon

最新推荐文章于 2023-03-29 15:23:16 发布

阅读量2.1k

点赞数 4

分类专栏： vant js vue

本文链接：https://blog.csdn.net/u010613970/article/details/109612664

版权

js 同时被 3 个专栏收录

18 篇文章 1 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

vant

2 篇文章 0 订阅

订阅专栏

开发移动端时，一般来说，tabbar在整个vue项目中都会单独取出来做成一个组件，那么很多时候会遇到一种情况，打开网站打tabbar默认为0，我们跳转到tabbar为2的页面后，刷新页面，tabbar变回0了，这时候就得想办法解决这问题

代码如下：

mounted() {
      /* 直接在tabbar组件页面监听，判断当前页面是哪个页面,
      解决刷新时,tab默认为 0 的bug */
      const navBarActive = window.location.hash
      if (navBarActive.includes('#/Home')) {
        this.active = 0
      } else if (navBarActive.includes('#/Order')) {
        this.active = 1
      } else if (navBarActive.includes('#/Receive')) {
        this.active = 2
      } else if (navBarActive.includes('#/Return')) {
        this.active = 3
      }
    },