最近做的项目里有个固定在底部的导航，之前用ionic做的时候因为有UI库所以很容易就解决了，因为这次是才接触vue，对vue能使用的ui库也不是很熟练，所以就自己封装了一个底部导航组件，希望可以帮助有需求的小伙伴
就是下面这种固定在底部的导航
下面上代码
<template> <div class="footer_guide"> <a href="javascript:;" class="guide_item" :class="{on : '/msite'===$route.path}" @click="goTo('/msite')"> <span class="item_icon"> <i class="iconfont icon-home"></i> </span> <span>首页</span> </a> <a href="javascript:;" class="guide_item" :class="{on : $route.path.indexOf('/search')!=-1}" @click="goTo('/search')"> <span class="item_icon"> <i class="iconfont icon-fenlei"></i> </span> <span>分类</span> </a> <a href="javascript:;" class="guide_item" :class="{on : '/order'===$route.path}" @click="goTo('/order')"> <span class="item_icon"> <i class="iconfont icon-cart"></i> </span> <span>购物车</span> </a> <a href="javascript:;" class="guide_item" :class="{on : '/profile'===$route.path}" @click="goTo('/profile')"> <span class="item_icon"> <i class="iconfont icon-mine"></i> </span> <span>我的</span> </a> </div> </template>上面是HTML部分，这个class的意思就是 如果当前路径是 ‘/msite’(这个是我们首页的路径)的时候 ，显示on这个class的样式
下面上css样式
<style scoped> .footer_guide { border-top:1px soild #e4e4e4; position:fixed; z-index :100; left :0; right :0; bottom:1px; background-color:#fff; width:100%; height:50px; display:flex; } .guide_item{ display:flex; flex:1; text-align :center; flex-direction:column; align-items :center; margin:5px; color:#999999; } .on{ color:#02a774 } span{ font-size:12px; margin-top:2px; margin-bottom:2px; } .iconfont{ font-size:22px; } </style> <script> export default { methods : { goTo(path){ this.$router.replace(path) } } } </script>JS中写好点击事件，点击跳转到要去的路径，这样就可以了
