如何用vuejs封装一个tabbar？

本文主要用vue封装了一个复用性强的tabbar组件。在需要用到的项目中直接将组件拿过来使用即可。

效果图

效果图.gif

App.vue

MainTabBar.vue

TabBar.vue

TabBarItem.vue

路由配置 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import('../views/home/Home')
const Find = () => import('../views/find/Find')
const Info = () => import('../views/info/Info')
const Profile = () => import('../views/profile/Profile')

// 1. 安装插件
Vue.use(VueRouter)

// 2. 创建路由对象
const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/find',
    component: Find
  },
  {
    path: '/info',
    component: Info
  },
  {
    path: '/profile',
    component: Profile
  }
]
const router = new VueRouter({
  routes,
  mode: "history"
})

// 3. 导出router
export default router