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; } } } }

JS

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>

注意：

页面设置占位容器是为了抵消底部导航栏固定定位的高度。tabIndex 标记当前选中的路由。tabsChange(index) 底部导航栏路由切换。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; },

---

五、效果图

---

六、感悟

在实际开发中，如果我们作为开发者，很多时候我们应该从用户、测试、运维的角度多多考虑，这个我们的代码慢慢就会变得完美，至少逻辑上没有什么错误，这样自己才能慢慢进步……