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>



相关推荐
雪芽蓝域zzs3 分钟前
第三十一节:角色管理页面 + 权限分配树形弹窗
前端·javascript·vue.js
zz-zjx4 分钟前
Python实用转换模板
开发语言·前端·python
Csvn12 分钟前
声明文件(.d.ts):让 TypeScript 认识你的 JS 库
前端
晓得迷路了14 分钟前
栗子前端技术周刊第 145 期 - Remix 3 RC、htmx 4.0、Rslib 1.0...
前端·javascript·react.js
恋猫de小郭19 分钟前
OpenAI :GPT-6 开始你需要给 Skill 和 AGENTS.md 做一次大扫除了
前端·人工智能·ai编程
IT_陈寒19 分钟前
Redis莫名连接失败,查了三天居然是配置的锅
前端·人工智能·后端
晴天1620 分钟前
Esbuild:前端构建工具的“速度革命”
前端
雪芽蓝域zzs24 分钟前
第三十五节:Axios 统一错误拦截、401 Token 过期处理
前端·javascript·vue.js
XIE39229 分钟前
TipKit:开源富文本编辑器套件,一套逻辑,任意风格!
前端·笔记·开源
范什么特西44 分钟前
一些常用名词
开发语言·前端·javascript