Vant 底部导航组件的实现 tabbar

最新推荐文章于 2023-05-12 13:15:47 发布

原创

最新推荐文章于 2023-05-12 13:15:47 发布 · 2.1k 阅读

9 ·

CC 4.0 BY-SA版权

_格鲁特宝宝原创，转载请务必注明出处

文章标签：

#Vant #Vue #tabbar #van-tabbar #vant 导航选项卡

本文探讨了如何利用Vant框架创建底部导航组件tabbar，涉及路由跳转的实现、选项卡的工作原理以及路由拦截等关键点。

设计底部导航的功能组件

1. 路由跳转

2. 选项卡的原理

3. 路由拦截

<template>
  <van-tabbar v-model="active" active-color="#30A3F8">
    <van-tabbar-item 
      v-for="(item,index) in tabbars" 
      :key="index" 
      :to="(item.name)"
    >
      <span>{
  
  {item.title}}</span>
      <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      tabbars: [
        {
          name: "home",
          title: "首页",
          normal: require("@/assets/images/shop/icon1_1.png"),
          active: require("@/assets/images/shop/icon1_2.png")
        },
        {
          name: "sort",
          title: "分类",
          normal: require("@/assets/images/shop/icon2_1.png"),
          active: require("@/assets/images/shop/icon2_2.