vant TabBar 底部导航栏（项目中）

最新推荐文章于 2025-02-26 09:00:00 发布

259-aaa

最新推荐文章于 2025-02-26 09:00:00 发布

阅读量6.2k

点赞数 2

分类专栏：学习工作 vant 组件库文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_44680550/article/details/122258997

版权

学习同时被 3 个专栏收录

66 篇文章

订阅专栏

工作

11 篇文章

订阅专栏

vant 组件库

9 篇文章

订阅专栏

本文介绍了如何在项目中使用 Vant UI 框架实现底部导航栏功能，包括展示预期效果、配置按需引入组件以及实际使用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

步骤

下载

// Vue
// # Vue 2 项目，安装 Vant 2：
npm i vant -S

// # Vue 3 项目，安装 Vant 3：
npm i vant@next -S

自动按需引入组件

// # npm 
npm i babel-plugin-import -D

// # yarn
yarn add babel-plugin-import -D

配置及引入
配置按需引入

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

使用

// srv/views/Layout/index.vuw
<template>
  <div>
    <!-- 二级路由 - 挂载点 -->
    <router-view></router-view>
    <van-tabbar route>
      <van-tabbar-item replace to="/layout/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/layout/search" icon="search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
    }
  },
};
</script>

<style scoped>
/* 中间内容区域 - 容器样式(留好上下导航所占位置) */
.main {
  padding-top: 46px;
  padding-bottom: 50px;
}
</styles>