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

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')}   ]  },]

<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>

<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>