Tabbar切换效果(vant)

route 是否开启路由模式

html 复制代码
<template>
  <div class="layout-page">
    <!-- 二级路由出口 -->
    <router-view></router-view>
    <van-tabbar route>
      <van-tabbar-item to="/home">
        首页
          <!-- 图标切换为active是高亮 -->
        <template #icon="{ active }">
            <!-- 封装好的 -->
          <cp-icon :name="`home-index-${active ? 'active' : 'default'}`" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/notify">
        消息
        <template #icon="{ active }">
          <cp-icon :name="`home-notice-${active ? 'active' : 'default'}`" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/user">
        我的
        <template #icon="{ active }">
          <cp-icon :name="`home-mine-${active ? 'active' : 'default'}`" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>



相关推荐
gzzeason几秒前
Ajax:现代JS发起http通信的代名词
前端·javascript·ajax
iphone1087 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
老坛00125 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00126 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾29 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐33 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价34 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花35 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101335 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树36 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js