mint ui的tabBar监听路由变化实现tabBar切换

Posted hj412

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mint ui的tabBar监听路由变化实现tabBar切换相关的知识,希望对你有一定的参考价值。

说明

  • 最近学习vue,使用了mint uitabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的。mui与它基本相反,因此它能根据搜索栏的路由变化,相应的tabBar高亮显示,而mint ui就不能,要加点代码实现了。

  • mint ui tabBar标签栏
    //页面 和 数据
    <template>
        <div id="main">
            <mt-tabbar v-model="selected">
                <mt-tab-item :id="home">
                    首页
                </mt-tab-item>
                <mt-tab-item :id="car">
                    购物车
                </mt-tab-item>
                <mt-tab-item :id="person">
                    我的
                </mt-tab-item>
            </mt-tabbar>
        </div>
    </template>

    <script>
        export default {
            data(){
                return {
                    //页面刷新取数据
                    selected: sessionStorage.getItem('selected')? JSON.parse(sessionStorage.getItem('selected')):'首页',
                    home: '首页',
                    car: '购物车',
                    person: '我的',      
                }
            }
        }
    </script>
  • 监听路由的变化
    • 监听路由的变化,那就要使用到侦听器 watch 了。一旦selected变化,就保存到 sessionStorage,当页面刷新的时候,在初始化数据取出即可。
     watch: {
          selected(val, oldVal){
              //一旦标签栏变化,把selected的值存到sessionStorage,保存当前值
              sessionStorage.setItem('selected', JSON.stringify(val))
              if(val === this.home){
                  //路由跳转 到首页
                  this.$router.replace('/home')          
              }else if(val === this.car){
                  //路由跳转 到购物车
                  this.$router.replace('/car')            
              }else if(val === this.person){
                  //路由跳转 到个人中心
                  this.$router.replace('/person')           
              }
          }

以上是关于mint ui的tabBar监听路由变化实现tabBar切换的主要内容,如果未能解决你的问题,请参考以下文章

cube-ui中TabBar实现路由跳转

vue 监听路由变化

Vue-- 监听路由变化,数据无法更新?

Flutter 自定义TabBar指示器(indicator)实现秒杀UI样式

vue2.0中使用mint ui做底部选项卡切换

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多