vant vue3 开发手机端网页vant vue 开发手机端网页vant tabbar双击显示

最新推荐文章于 2024-04-18 16:36:58 发布

青青子衿越

最新推荐文章于 2024-04-18 16:36:58 发布

阅读量309

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46376192/article/details/128942791

版权

在封装vant tabba的组件中添加：

onBeforeMount(()=>{
    if (proxy.$route.name == "homeTop") {
        proxy.active = 0;
      } else if (proxy.$route.name == "car") {
        proxy.active = 1;
      } else{
        proxy.active = 2;
      }
    }
)

根据去往的路由对应的名字指定active的值

完整代码：

<template>
    <div>
        <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o" to="/home/homeTop">首页</van-tabbar-item>
  <van-tabbar-item icon="shopping-cart-o" badge="1" to="/car">购物车</van-tabbar-item>
  <van-tabbar-item icon="friends-o">退出登陆</van-tabbar-item>
</van-tabbar>

    </div>
</template>

<script lang="ts">
     import {computed, defineComponent,ref,getCurrentInstance, onBeforeMount} from 'vue';

     export default defineComponent({
        setup(){
            let {proxy}:any=getCurrentInstance();
            let active=ref(0)
               onBeforeMount(()=>{
                   if (proxy.$route.name == "homeTop") {
                        proxy.active = 0;
                      } else if (proxy.$route.name == "car") {
                              proxy.active = 1;
                        } else{
                             proxy.active = 2;
                         }
                  }
                 )
                return{
                 active
                    }
           
        }

})
</script>

<style lang="less" scoped>

</style>