2020-03-18(封装tabbar)

router文件下的index.js文件

import Vue from 'vue'

import VueRouter from 'vue-router'

// 1.安装插件

Vue.use(VueRouter)

// 3.配置映射关系

const routes = [

    {

        path: '/',

        redirect: '/home'

    },

    {

        path: '/home',

        component: () => import('../views/home/Home')

    },

    {

        path: '/category',

        component: () => import('../views/category/Category')

    },

    {

        path: '/shopcart',

        component: () => import('../views/shopcart/Shopcart')

    },

    {

        path: '/profile',

        component: () => import('../views/profile/Profile')

    }

]

// 2.创建路由对象

const router = new VueRouter({

    routes,

    mode: 'history'

})

// 3.导出路由

export default router

main.js文件

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  render: h => h(App)

})

App.vue文件

components文件夹下的MainTabBar.vue文件

components文件夹下的tabbar文件下的TabBar.vue文件

components文件夹下的tabbar文件下的tabBarItem.vue文件

在src文件夹下创建一个views文件，分别创建文件夹profile，category，shopcart，home子文件夹，又在对应子文件夹创建同名以.vue为后缀的组件