最近vue不是特别受欢迎。我想在vue的底部写一个菜单栏，然后试着开始写。听起来很痛苦，但我还是写了。在这个过程中，我重新查询了一些资料，看了一些视频。

1写好界面

这是我写的四个界面

2在router.js中重新定义路由

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

Routes: [{path:'/'，name:' index '，component3360 ()=import('。/view/index ')，//lazy load introduction，route children:[ {path: ' '，redirect : '/' charts ' }，//re-item { path : '/' charts '，name:' charts '，component: ()=import('。/view/charts . vue ')}，{ path : '/a discover ' name : ' a discover '，component:()=import('。/view/adiscover . vue ')}，{path:'/ybutton '，ybutton:'ybutton '，Component: ()=import('。/view/ybutton . vue ')}，{path:'/me '，name:' me '，component3360 ()=import('。/view/me . vue ')}]}，

模板！-div class=' footer ' router-link to='/' tag=' div ' span img : src=' http : this .$route.path=='/charts '？https://ss0。百度。com/6 onwsjip0qiz 8 tyhnq/it/u=3100024767，29226190fm=58 ' : ' https://ss0。百度。com/6 onwsjip0qiz 8 tyhnq/it/u=3993527673，913427098fm=58 " alt=" "/span资产/span/router-link router-link to='/ADIS封面' tag=' div ' span img : src=' http : this .$route.path=='/adiscover '？'https://10 .网址。cn/QQ course _ logo _ ng/ajnvdqhzlacypomm 22 sqf2iidmd 25 fy IBD 1 ussqfhdiauiiavicpaibgsricky 8g y8 ku5 qdxsc/356 ' : ' https://ss0。百度。com/6 onwsjip0qiz 8 tyhnq/it/u=3993527673，913427098fm=58 ' '商城/span/router-link router-link to='/ybutton ' tag=' div ' span img : src=' http : this .$route.path=='/ybutton '？'https://10 .网址。cn/QQ course _ logo _ ng/ajnvdqhzlacypomm 22 sqf2iidmd 25 fy IBD 1 ussqfhdiauiiavicpaibgsricky 8g y8 ku5 qdxsc/356 ' : ' https://ss0。百度。com/6 onwsjip0qiz 8 tyhnq/it/u=3993527673，913427098fm=58 ' '交易/span/router-link router-link to='/me ' tag=' div ' span img : src=' http : this .$route.path=='/me '？https://10 .网址。cn/QQ course _ logo _ ng/ajnvdqhzlacypomm 22 sqf2iidmd 25 fy IBD 1 ussqfhdiauiiavicpaibgsricky 8g y8 ku5 qdxsc/356 ' : ' https://ss0。百度。com/6 onwsjip0qiz 8 tyhnq/it/u=3993527673，913427098fm=58 ' '我的/span/router-link/div-div class=' footer ' router-link v-for='(项目，索引)在data ' :键=' index ' : to=' item。path ' div class=' div s ' @ click=' tab _ click(item。路径)' I : class='项。图标==真？红色' : ' bloack ' ' 1/I I { { item }。标题} }/I/div/路由器-链接/div/模板脚本导入{常量}来自“加密”；导出默认值{ props: { data:Array }，data(){ return { datai : this。data } }，created(){ }，mounted(){ console。日志(这个。data)}，方法： { tab _ click(path){ const即=this让datary=this.datafor(设I=0；伊达塔里。长度；i ){ datary[i].icon=falseif(datary[i]).path==path){ datary[i].图标=真；console.log(' -')，datary[i].路径)} }此。datai=datary控制台。log(datary)} } }/脚本样式范围。页脚{位置： }已修复；bottom:0pxleft:0px宽度：100%;显示： flex justice-内容：空格；}.页脚divs { padding:10px }。红色{ color : redfont-size :14 px；}.bloack { font-size :14 px颜色：黑色；}/* - */.洗脚盆{宽度： 100%；高度： 2.613333毫米；位置：固定；底部： 0；display : flex align-items :居中；背景：白色；边框-top: 1px实心# eeeeeecolor: # 999999}。足球span { display : block font-size :64雷姆；}.足球事业部{ flex : 1；文本对齐：中心；}.足球运动员img { height: 1.066667rem}。足球运动员。路由器-链路-精确-活动{ color : # 2F 83 C3；}.足球运动员。活动{ color : # 2F 83 C3；}/style4显示底部菜单栏的界面引入标签栏组件

模板div class='index '主页路由器视图/路由器视图tabbar : data=' tabbarData '/div/template script从tabbar导入'./components/tab Baer ' export default { name : ' index '，data(){ return { tabbarda : [{ title : '微信，icon:true，path:'/charts'}，{title: '通讯录，icon:false，path:'/adiscover'}，{title: '发现，icon:false，path:'/ybutton'}，{title: '我的，icon:false，path:'/me'}，] }}，components: { tabbar，}，}/scriptstyle作用域。索引{宽度：100%；高度：100%;飞越：隐藏；padding:16px盒子大小：边框盒子；} /style5这就是最终结果

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