解決mintUI底部導航不跳轉

最近想在項目上使用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就好了，至於什么道理我也不知，問題是解決了