VUE实现底部导航栏

在做一个VUE网页项目时，需要实现底部导航栏的功能，点击相应的按钮进行页面的切换。由于第一次开发这种网页项目，对框架不太熟悉，于是去网上搜寻了一些资料，参考别人的做法，实现了这个底部导航栏。

现在记录一下这个导航栏的实现过程。

1.首先写好导航栏的样式和布局，做出静态效果。

<template>
  <div class="bottom" v-show="isShow">
    <div class="item">
      <i class="iconfont icon-shouye1"></i>
      <p>首页</p>
    </div>
    <div class="item" >
      <i class="iconfont icon-wode"></i>
      <p>我的</p>
    </div>
  </div>
</template>

2.绑定点击事件@click实现页面的切换：在div中添加@click属性，传递path参数

<div class="item" @click="clickItem('/')>

clickItem方法根据传入的path跳转到不同的页面

methods:{
        clickItem:function(path){
            this.$router.push(path);
        }
      }

3.根据当前页面的路由path决定改变哪个按钮的颜色：在div中添加:class属性

：class可以根据$route.path==='/'的值为true或false来决定是否使用active类的css样式

<div class="item" @click="clickItem('/')" :class="{active: $route.path==='/'}">

然后编写被点击按钮的css样式改变颜色

.active{
  color:#108b70;
}

 

完整代码：

<template>
  <div class="bottom">
    <div class="item" @click="clickItem('/')" :class="{active: $route.path==='/'}">
      <i class="iconfont icon-shouye1"></i>
      <p>首页</p>
    </div>
    <div class="item" @click="clickItem('/myhome')" :class="{active: $route.path==='/myhome'}">
      <i class="iconfont icon-wode"></i>
      <p>我的</p>
    </div>
  </div>
</template>

<script>
    export default {
      name: "bottom",
      methods:{
        clickItem:function(path){
            this.$router.push(path);
        }
      }

    }
</script>

<style scoped>
  @import "./../icon/iconfont.css";
  .bottom{
    position: fixed;
    bottom:0px;
    border-top:1px solid #d2d2d2;
    background-color: #f2f2f2;
    width: 100%;
    height:60px;
  }
  .item{
    margin:5px 20%;
    float:left;
  }
  .item p{
    margin:0;
    font-size: 15px;
  }
  .active{
    color:#108b70;
  }
</style>