fjjgpt/src/layout/components/BottomNav.vue

<template>
    <div class="bottom-nav">
        <a v-for="item in menuList" :key="item.path" :class="{ 'active': activeIndex === item.path }"
            @click.prevent="setActiveIndex(item.path)">
            <van-icon style="margin-bottom: 5px;" :name="item.icon"
                :color="activeIndex === item.path ? '#007BFF' : '#fff'" size="1.3rem" />
            {{ item.name }}
        </a>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const menuList = [
    { name: '首页', icon: 'wap-home-o', path: '/home' },
    { name: '一张图', icon: 'location-o', path: '/map' },
    { name: '督查', icon: 'completed-o', path: '/inspect' },
    { name: '问题', icon: 'orders-o', path: '/question' },
    { name: '我的', icon: 'user-o', path: '/about' },
]

const route = useRoute();
const router = useRouter();
// 定义当前激活的导航索引
const activeIndex = ref(route.path);

// 定义设置激活索引的方法
const setActiveIndex = (path) => {
    activeIndex.value = path;
    router.push(path);
};
</script>
<style lang="scss" scoped>
.bottom-nav {
    display: flex;
    justify-content: space-around;
    background-color: #333;
    color: white;
    // padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.bottom-nav a {
    color: white;
    text-decoration: none;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .7rem;
    border-radius: 10px;
}

.bottom-nav a.active {
    color: #007BFF;
}
</style>