vue自定义tab导航栏（方法一）

效果图如下

一、引用Vant 4组件库

Vant 4 - 轻量、可定制的移动端组件库 (gitee.io)

二、快速上手Vant4

快速上手 - Vant 4 (gitee.io)

三、安装Vue Router

安装 | Vue Router (vuejs.org)

四、创建vue文件

        1、layoutIndex.vue  基本架子，内置自定义底部导航栏代码

        2、mainIndex.vue    首页页面

        3、menuIndex.vue   菜单页面

        4、shopIndex.vue    购物页面

        5、myIndex.vue       我的页面

五、导入tab图标

六、 配置router内容

import { createRouter, createWebHistory } from 'vue-router'
import layout from '@/views/Layout/layoutIndex.vue'
import home from '@/views/Layout/mainIndex.vue'
import menu from '@/views/Layout/menuIndex.vue'
import shop from '@/views/Layout/shopIndex.vue'
import my from '@/views/Layout/myIndex.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'layout',
      component: layout,
      redirect: '/home',
      children: [
        { path: '/home', name: 'home', component: home },
        { path: '/menu', name: 'menu', component: menu },
        { path: '/shop', name: 'shop', component: shop },
        { path: '/my', name: 'my', component: my }
      ]
    }
  ]
})
export default router

七、搭建基本页面 

 八、上自定义tab代码（layoutIndex.vue）

<script setup>
import { ref } from 'vue'
import home from '@/assets/images/home.png'
import home_active from '@/assets/images/home_active.png'
import menu from '@/assets/images/menu.png'
import menu_active from '@/assets/images/menu_active.png'
import shop from '@/assets/images/shopbag.png'
import shop_active from '@/assets/images/shopbag_active.png'
import my from '@/assets/images/my.png'
import my_active from '@/assets/images/my_active.png'
const home_icon = {
    num: 1,
    active: home_active,
    inactive: home
};
const menu_icon = {
    num: 2,
    active: menu_active,
    inactive: menu
};
const shop_icon = {
    num: 3,
    active: shop_active,
    inactive: shop
};
const my_icon = {
    num: 4,
    active: my_active,
    inactive: my
}
const num = ref(0);
</script>
<template>
    <div>
        <router-view />
        <van-tabbar route v-model="num">
            <van-tabbar-item replace to="/home">
                <span>首页</span>
                <template #icon="props">
                    <img :src="props.active ? home_icon.active : home_icon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/menu">
                <span>菜单</span>
                <template #icon="props">
                    <img :src="props.active ? menu_icon.active : menu_icon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/shop">
                <span>购物</span>
                <template #icon="props">
                    <img :src="props.active ? shop_icon.active : shop_icon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item replace to="/my">
                <span>我的</span>
                <template #icon="props">
                    <img :src="props.active ? my_icon.active : my_icon.inactive" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<style scoped lang="less"></style>

九、配置App.vue

<script setup>
import Layout from '@/views/Layout/layoutIndex.vue'
</script>

<template>
  <Layout></Layout>
</template>

十、恭喜你！成功自定义tab导航栏！