vue如何实现自定义底部菜单栏

这篇文章主要介绍了vue如何实现自定义底部菜单栏,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

1 写好界面

这是我写好的四个界面

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 这就是最终结果