<template>
<div>
<!-- 根据二级路由动态渲染内容 -->
<router-view />
<div style="height: 60px"></div>
<!-- 底部选项卡 -->
<mt-tabbar fixed v-model="tabSelected">
<mt-tab-item id="index">
首页
<!-- <img :src="require(`@/assets/index_${tabSelected=='index'?1:0}.png`)" slot="icon"> -->
<img
v-if="tabSelected == 'index'"
src="@/assets/index_1.png"
slot="icon"
/>
<img v-else src="@/assets/index_0.png" slot="icon" />
</mt-tab-item>
<mt-tab-item id="me">
我的
<img v-if="tabSelected == 'me'" src="@/assets/me_1.png" slot="icon" />
<img v-else src="@/assets/me_0.png" slot="icon" />
</mt-tab-item>
</mt-tabbar>
</div>
</template>
<script>
export default {
data() {
return {
// tabSelected的值应该是当前资源路径最末尾单词
// /home/index /home/me
tabSelected: this.$route.path.split("/")[2],
// tabSelected: this.$route.path.split('/').pop()
};
},
watch: {
tabSelected(to, from) {
console.log(`切换了底部选项卡，从 ${from} 跳转到 ${to} `);
if (to == "me") {
this.$router.push("/home/me");
} else if (to == "index") {
this.$router.push("/home/index");
}
// this.$router.push(to)
},
},
};
</script>