vue3封装底部导航

### Vue3 封装底部导航组件

#### 创建项目结构
为了创建一个灵活且可重用的底部导航栏，在`components`文件夹中新建一个名为`MainTabBar.vue`的文件用于定义主要逻辑和样式[^4]。

<template>
  <div class="footer-bar">
    <router-link v-for="(item, index) in items" :key="index" :to="item.path" active-class="active-tab" tag="span"
      @click.native="handleClick(item)">
      <i :class="[item.iconClass]" />
      {{ item.text }}
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'MainTabBar',
  data() {
    return {
      items: [
        { path: '/home', iconClass: 'icon-home', text: '首页' },
        { path: '/category', iconClass: 'icon-category', text: '分类' },
        { path: '/cart', iconClass: 'icon-cart', text: '购物车' },
        { path: '/profile', iconClass: 'icon-profile', text: '个人中心' }
      ]
    };
  },
  methods: {
    handleClick(item) {
      console.log(`Navigating to ${item.path}`);
    }
  }
};
</script>

<style scoped>
.footer-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
}

.active-tab {
  color: blue !important;
}
</style>

此代码片段展示了如何构建一个简单的底部导航条，其中包含四个链接项。每个链接都绑定了路径、图标类名以及描述文字，并设置了点击事件处理函数以便于扩展功能需求。

#### 配置路由映射关系
在`router/index.js`中配置好对应的页面跳转规则：

import Home from '@/views/Home.vue';
import Category from '@/views/Category.vue';
import Cart from '@/views/Cart.vue';
import Profile from '@/views/Profile.vue';

const routes = [{
  path: '/',
  redirect: '/home'
}, {
  path: '/home',
  component: Home,
}, {
  path: '/category',
  component: Category,
}, {
  path: '/cart',
  component: Cart,
}, {
  path: '/profile',
  component: Profile,
}];

这样当用户点击不同的标签时就可以顺利切换至相应的视图界面。

#### 使用懒加载优化性能表现
对于大型应用来说，可以考虑采用按需加载的方式减少初始包体积。修改上述导入语句如下所示：

const Home = () => import('@/views/Home.vue');
// ...其他类似更改...

这使得只有当特定路由被访问的时候才会去加载该页面的相关资源。