标签：Vue vant -- mine else indexOf active path

在 vue-cli 移动项目中，使用 vant 底部切换，例如：/mine 和 /mine/collect 都需要"我的"高亮，点击"我的"，回到 /mine 页面。使用vant文档中的 tabbar change 方法，点击"我的"不能触发 change 事件，所以可以点击每个 item 实现。刷新也要保留指定页面高亮。

页面数据可以循环显示，为了展示自定义图标，这里没有做data数据。

<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000" :placeholder="true">
 <van-tabbar-item icon="home-o" @click="onClick('/')">首页</van-tabbar-item>
  <van-tabbar-item @click="onClick('/market')">
    <span>自定义</span>
    <template #icon="props">
      <img :src="props.active ? icon.active : icon.inactive" />
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="award-o" @click="onClick('/artist')">标签</van-tabbar-item>
  <van-tabbar-item icon="diamond-o" @click="onClick('/hotspot')">标签</van-tabbar-item>
  <van-tabbar-item icon="contact" @click="onClick('/mine')">我的</van-tabbar-item>
</van-tabbar>       

export default {
  data () {
    return {
      active: 0,
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
      }
    }
  },
  mounted () {
    this.handleActive()
  },
  watch: {
    $route () {
      this.handleActive()
    }
  },
  methods: {
    handleActive () {
      let path = this.$route.path
      if (path.indexOf('/market') !== -1) {
        this.active = 1
      } else if (path.indexOf('/artist') !== -1) {
        this.active = 2
      } else if (path.indexOf('/hotspot') !== -1) {
        this.active = 3
      } else if (path.indexOf('/mine') !== -1) {
        this.active = 4
      } else if (/\/(\?.)*$/.test(path)) {
        this.active = 0
      } else {
        this.active = -1
      }
    },
    onClick (path) {
      if (this.$route.path !== path) {
        this.$router.push({ path })
      }
    }
  }
}

标签：Vue,vant,--,mine,else,indexOf,active,path
来源： https://www.cnblogs.com/lisaShare/p/16229811.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。