底部菜单栏的实现

最新推荐文章于 2024-05-28 00:39:18 发布

叮叮叮叮叮~

最新推荐文章于 2024-05-28 00:39:18 发布

阅读量226

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_49800246/article/details/119297833

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现底部菜单栏页面的跳转以及显示页面的切换，如图

实现代码如下

HTML

<!-- 底部菜单栏 -->
    <div class="bottom">
      <div id="d1" class="bottom-item" :class="{active: this.$route.path === '/'}" @click="change('/')">
        日记
      </div>
      <div id="d2" class="bottom-item" :class="{active: this.$route.path==='/mood'}" @click="change('mood')">
        心情贴
      </div>
      <div id="d3" class="bottom-item" :class="{active: this.$route.path==='/person'}" @click="change('person')">
        主页
      </div>
    </div>

JS

change(path) {
      console.log('path', path, this.$route.name)
      // 获取当前页面的路径名
      let thisUrl = this.$route.name
      // 当跳转路径为 '/'，且当前页面不为 '/'，实现跳转
      if(path === '/' && thisUrl !== "/") {
        this.$router.push('/')
      } else if(path === 'mood' && thisUrl !== "Mood") {
        this.$router.push('/mood')
      } else if(path === 'person' && thisUrl !== "Person") {
        this.$router.push('/person')
      }
    }

css

.bottom {
  width: 100%;
  height: 60px;
  background-color:rgb(191, 230, 191);
  position: fixed;
  left: 0;
  bottom: 0;
  border-top: 1px solid #ccc;
  div {
    display: inline-block;
    text-align: center;
    height: 60px;
    line-height: 60px;
    width: 32.5%;
    a {
        color: #333;
        text-decoration: none;
    }
  }
  // 显示当前所处页面
  .active {
    color: red;
    box-shadow: rgb(164, 221, 164) 1px 2px 5px 5px;
  }
}