最近想在项目上使用vue，因为是移动端我选择了饿了么的mintUI，发现坑居多
底部导航切换设置路由不跳转，搜了好多都没有说到点上，为了让大家少走几步弯路直接上代码吧！
<template>
<mt-tabbar v-model="selected">
<!-- @click="goHome" -->
<mt-tab-item id="home" @click.native="goHome">
<img v-if="this.selected == ‘home‘ " slot="icon" src="../../assets/icon/homed.png">
<img v-else slot="icon" src="../../assets/icon/home.png">
首页
</mt-tab-item>
<mt-tab-item id="manage" @click.native="goManage">
<img v-if="this.selected == ‘manage‘ " slot="icon" src="../../assets/icon/managed.png">
<img v-else slot="icon" src="../../assets/icon/manage.png">
管理
</mt-tab-item>
<mt-tab-item id="active" @click.native="goActive">
<img v-if="this.selected == ‘active‘ " slot="icon" src="../../assets/icon/actived.png">
<img v-else slot="icon" src="../../assets/icon/active.png">
活动
</mt-tab-item>
<!-- v-tap="{methods:goFinance}" -->
<mt-tab-item id="finance" @click.native="goFinance">
<img v-if="this.selected == ‘finance‘ " slot="icon" src="../../assets/icon/financed.png">
<img v-else slot="icon" src="../../assets/icon/finance.png">
财务
</mt-tab-item>
</mt-tabbar>
</template>
<script>
export default {
data(){
return {
selected:"",
title:""
}
},
created(){
this.selected = this.$route.name;
},
methods:{
goHome(){
if(this.$route.name !== ‘home‘){
this.$router.push({ name: ‘home‘, params: { titles: ‘首页‘ }})
}
},
goManage(){
if(this.$route.name !== ‘manage‘){
this.$router.push({ name: ‘manage‘, params: { titles: ‘管理‘ }})
}
},
goActive(){
if(this.$route.name !== ‘active‘){
this.$router.push({ name: ‘active‘, params: { titles: ‘活动‘ }})
}
},
goFinance(){
if(this.$route.name !== ‘finance‘){
this.$router.push({ name: ‘finance‘, params: { titles: ‘财务‘ }})
}
}
}
}
</script>
<style>
</style>
其实只要给click后面加一个native就好了，至于什么道理我也不知，问题是解决了
原文：https://www.cnblogs.com/yuxiaoge/p/11773524.html