Vue开发精要之底部导航栏-蒲公英云

Vue开发精要之底部导航栏

在我们日常开发中，尤其是移动端开发（H5、微信公众号、企业微信等）中，我们往往需要自己设计底部导航栏。或许，导航栏这种常见功能，大家都是司空见惯的，但是其中设计的知识点却是不少，本片文档将要介绍地步导航栏涉及的知识点与常用方法，共同学习，共同进步。

一、导航切换

HTML

<!-- 占位容器 -->
<div class="placegolder-container"></div>
<!-- 底部导航栏 -->
<div class="bottom-tabs">
  <div class="tabs-item" v-for="(item, index) in tabsList" :key="index" @click="tabsChange(index)">
    <img class="tab-icon" :src="tabIndex==index?item.srcS:item.src">
    <p class="tab-text" :class="tabIndex==index?'active':''">{
     {item.text}}</p>
  </div>
</div>

CSS

.placegolder-container { 
    height: 70px;
  }
  .bottom-tabs { 
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0px -1px 1px #e6e6e6;
    background-color: #fff; .tabs-item { 
      padding: 5px 0;
      flex: 1;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center; .tab-icon { 
        width: 30px;
        height: 30px;
        border-radius: 4px;
      }
      .tab-text { 
        font-size: 14px; &.active { 
          color: blue;
        }
      }
    }
  }

export default { 
  name: "app",
  components: { },
  created() { 
    this.tabIndex = localStorage.getItem("tabIndex");
    console.log(this.tabIndex, "222222222222222");
  },
  data() { 
    return { 
      tabIndex: 0,
      tabsList: [
        { 
          src: require("../src/assets/images/2.png"),
          srcS: require("../src/assets/images/1.png"),
          text: "首页",
          path: "/booking"
        },
        { 
          src: require("../src/assets/images/2.png"),
          srcS: require("../src/assets/images/1.png"),
          text: "查询",
          path: "/query"
        },
        { 
          src: require("../src/assets/images/2.png"),
          srcS: require("../src/assets/images/1.png"),
          text: "信息",
          path: "/info"
        },
        { 
          src: require("../src/assets/images/2.png"),
          srcS: require("../src/assets/images/1.png"),
          text: "我的",
          path: "/mine"
        }
      ]
    };
  },
  methods: { 
    tabsChange(index) { 
      this.tabIndex = index;
      this.$router.push({ 
        path: this.tabsList[index].path
      });
      console.log(this.tabsList[index].path);
      localStorage.setItem("tabIndex", this.tabIndex);
    }
  },
  watch: { 
    $route(newVal, oldVal) { 
      console.log(newVal, oldVal);
      if (newVal.meta.index) { 
        this.tabIndex = newVal.meta.index;
        localStorage.setItem("tabIndex", this.tabIndex);
      }
    }
  }
};
</script>

注意：
1. 页面设置占位容器是为了抵消底部导航栏固定定位的高度。
2. tabIndex 标记当前选中的路由。
3. tabsChange(index) 底部导航栏路由切换。
4. watch 监听路由变化，保持路由选中的驻留（选中/激活）样式。

二、缓存使用

为什么要使用缓存？缓存哪些内容？
答：使用缓存是为了保存选中路由的 tabIndex ，在刷新页面的时候，依然可以保持（选中/激活）状态。

三、路由配置与监听

（1）配置

router.js

{ 
      path: '/booking',
      name: 'booking',
      meta: {  index: 0, title: '首页' },
      component: () => import ('../src/pages/booking/booking.vue')
    },
    { 
      path: '/query',
      name: 'query',
      meta: {  index: 1, title: '查询' },
      component: () => import ('../src/pages/query/query.vue')
    },

在配置路由的时候，我们可以添加meta.title 与 meta.index属性，用于与选中路由的 tabIndex

（2）监听

注意：使用监听的目的是为了在使用浏览器前进后退的时候，保持路由选中的驻留（选中/激活）样式。代码见 CSS

四、动态修改页面标题

在修改页面标题 title 的时候，我们配置路由的 title 属性来控制。

// 根据路由设置标题
router.beforeEach((to, from, next) => { 
    console.log({  to, from })
     /*路由发生改变修改页面的title */
    if (to.meta.title) { 
        document.title = to.meta.title
    }
    next();
})

另外，在涉及详情相关的页面的时候，我们往往需要使用详情中的某一属性来设置标题，这个时候我们可以通过，在页面的 created 中使用方法修改。具体如下：
```
created() { 
    document.title = this.currentRoomInfo.name;
  },
```