vue 自定义底部菜单栏

最近vue不是特别火，自己想写一个vue 的底部菜单栏，然后试着开始写，起来还是听痛苦的，但是还是写出来，这个过程重查询了一些资料和看了一些视频。

1 写好界面

这是我写好的四个界面

image.png

2 在router.js重定义路由

在一级路由下面定义自己tabbr的子路由。

routes: [
    {
      path: '/',
      name: 'index',
      component:()=>import('./views/index'), //懒加载引入，路由
      children:[
        {path:'',redirect:'/charts'},//重定项
        {path:'/charts',name:'charts',component:()=>import('./views/charts.vue')},
        {path:'/adiscover',name:'adiscover',component:()=>import('./views/adiscover.vue')},
        {path:'/ybutton',ybutton:'ybutton',component:()=>import('./views/ybutton.vue')},
        {path:'/me',name:'me',component:()=>import('./views/me.vue')}
      ]
    },
]

3 封装tabbar底部菜单栏 组件

4 显示底部菜单栏的界面 引入tabbar 组件

5 这就是最终结果

image.png