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

前端  /  管理员 发布于 4年前   658

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• Vue 菜单栏点击切换单个class(高亮)的方法
• vue2.0使用v-for循环制作多级嵌套菜单栏
• Vue实现侧边菜单栏手风琴效果实例代码
• Vue-路由导航菜单栏的高亮设置方法
• 基于vue.js实现侧边菜单栏