---

前言

MintUI实现手机端首页底部

---

一、效果图

二、代码

1.vue

代码如下：

//创建点击事件，激活状态显示图片1（蓝色），否则显示图片2（灰色）<mt-tabbar v-model="xuanzhong"><mt-tab-item id="home"><img slot="icon" v-if="xuanzhong=='home'" src="../assets/common/main_1.png" alt><img slot="icon" v-else src="../assets/common/main_0.png" alt>首页</mt-tab-item><mt-tab-item id="me"><img slot="icon" v-if="xuanzhong=='me'" src="../assets/common/me_1.png" alt><img slot="icon" v-else src="../assets/common/me_0.png" alt>我的</mt-tab-item>
</mt-tabbar>

2.js

代码如下：

<script>
export default {data() {return {navactive: "1",xuanzhong: "home"};},//watch监听xuanzhongwatch: {xuanzhong(newval) {//根据newval，执行路由跳转//两种跳转push方法，如下//this.$router.push('/'+newval)if (newval == "home") {this.$router.push("/");} else if (newval == "me") {this.$router.push("/me");}}}
};
</script>

---

总结

手机端 首页 底部导航，及点击跳转事件