Vue开发一个简易的TabBar组件

1. 创建Vue项目

vue init webpack tabbar

2. 文件目录

3. /router/index.js

import Vue from 'vue'
import Router from 'vue-router'

const Home = () => import('../views/home/home');
const Category = () => import('../views/category/category');
const Cart = () => import('../views/cart/cart');
const Profile = () => import('../views/profile/profile');


Vue.use(Router)

export default new Router({
   
  mode: "history",
  routes: [{
   
    path: '',
    redirect: '/home'
  }, {
   
    path: '/home',
    component: Home
  }, {
   
    path: '/category',
    component: Category
  }, {
   
    path: '/cart',
    component: Cart
  }, {
   
    path: '/profile',
    component: Profile
  }
  ]
})

4. TabBar.vue

<template>
  <div id="tab-bar">
    <slot></slot>