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底部菜单栏 组件

<template>
<!-- <div class=\"footbar\">
   <router-link to=\'/\' tag=\'div\'>
     <span>      <img :src=\"this.$route.path==\'/charts\'?\'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3100024767,29226190&fm=58\':\'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3993527673,913427098&fm=58\'\" alt=\"\">
     </span>
     <span>资产</span>
   </router-link>
   <router-link to=\'/adiscover\' tag=\'div\'>
     <span>      <img :src=\"this.$route.path==\'/adiscover\'?\'https://10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAcYPom22osQf2IIdMD25ofYUibd1USSQFHdiaUIiavicpAibgSReIqCky8gqY8ku5qdXsc/356\':\'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3993527673,913427098&fm=58\'\" alt=\"\">
     </span>
     <span>商城</span>
   </router-link>
   <router-link to=\'/ybutton\' tag=\'div\'>
     <span>      <img :src=\"this.$route.path==\'/ybutton\'?\'https://10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAcYPom22osQf2IIdMD25ofYUibd1USSQFHdiaUIiavicpAibgSReIqCky8gqY8ku5qdXsc/356\':\'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3993527673,913427098&fm=58\'\" alt=\"\">
     </span>
     <span>交易</span>
   </router-link>
   <router-link to=\'/me\' tag=\'div\'>
     <span>      <img :src=\"this.$route.path==\'/me\'?\'https://10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAcYPom22osQf2IIdMD25ofYUibd1USSQFHdiaUIiavicpAibgSReIqCky8gqY8ku5qdXsc/356\':\'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3993527673,913427098&fm=58\'\" alt=\"\">
     </span>
     <span>我的</span>
   </router-link>
  </div> -->
<div class=\"footer\">
    <router-link v-for=\"(item,index) in data\" :key=\"index\" :to=\"item.path\">
      <div class=\"divs\" @click=\"tab_click(item.path)\">
        <i :class=\"item.icon==true?\'red\':\'bloack\'\">1</i>
        <i>{{item.title}}</i>  
      </div>  
    </router-link>    
</div>
</template>
<script>
import { constants } from \'crypto\';
export default {
  props:{
    data:Array
  },
  data(){
    return{ 
      datai:this.data
    }
  },
  created(){
  },
  mounted(){
    console.log(this.data)
  },
  methods:{
    tab_click(path){
      const that=this;
      let datary=this.data;
        for(let i=0;i<datary.length;i++){ 
            datary[i].icon=false;
          if(datary[i].path==path){ 
            datary[i].icon=true;
             console.log(\'---------\',datary[i].path)
          }
        }    
      this.datai=datary;
      console.log(datary)      
    }
  }   
}
</script>
<style scoped>
.footer{
  position: fixed;
  bottom:0px;
  left:0px;
  width:100%;
  display:flex;
  justify-content: space-between;
}
.footer .divs{padding:10px;}
.red{color:red;font-size:14px;}
.bloack{font-size:14px;color:black;}
/* ---------------- */
 .footbar{
  width: 100%;
  height: 2.613333rem;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  background: white;
  border-top: 1px solid #eeeeee;
  color: #999999;
}
.footbar span{
  display: block;
  font-size: .64rem;
}
.footbar div{
  flex: 1;
  text-align: center;
}
.footbar img{
  height: 1.066667rem;
}
.footbar .router-link-exact-active{
  color: #2F83C3;
}
.footbar .active{
  color: #2F83C3;
}
</style>

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

<template>
  <div class=\"index\">
    主页
    <router-view></router-view>
    <tabbar :data=\"tabbarData\"/>
  </div>
</template>
<script>
import tabbar from \'../components/tabbaer\'
export default {
name:\'index\',
data() {
  return {
    tabbarData:[
      {title:\'微信\',icon:true,path:\'/charts\'},
      {title:\'通讯录\',icon:false,path:\'/adiscover\'},
      {title:\'发现\',icon:false,path:\'/ybutton\'},
      {title:\'我的\',icon:false,path:\'/me\'},
      ]
  }
},
components:{
  tabbar,
},
}
</script>
<style scoped>
  .index{
    width:100%;
    height:100%;
    overflow: hidden;
    padding:16px;
    box-sizing:border-box;
    }   
</style>

5 这就是最终结果

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