首先你需要封装一个公共的组件，我这里是 FooterMenu.vue
image.png
//FooterMenu.vue 的代码 ,通过 path来判断
image.png
<template>
<div class="footer-box" v-show="isshow">
<div
class="f-item"
v-for="(n,index) in Nav"
:key="index"
:class="{active:TabNav === n.router}"
@click="skip(index)"
>
<div>
<i
class="iconfont"
:class=" TabNav == n.router ? n.activeIcon : n.noIcon"
></i>
</div>
<span>{{n.text}}</span>
</div>
</div>
</template>
<script>
export default {
name: "footer-menu",
data() {
return {
// active: "index",
isshow:true,
TabNav: this.$route.path,
Nav: [
{ text: "首页", router: "/",activeIcon:'icon-shouyexuanzhong-',noIcon:'iconfont icon-shouye' },
{ text: "资产", router: "/property",activeIcon:'icon-zichanxuanzhong-',noIcon:'iconfont icon-zichan1' },
{ text: "我的", router: "/userCenter",activeIcon:'icon-wodexuanzhong-',noIcon:'iconfont icon-wode' }
]
};
},
methods: {
skip(index) {
console.log(this.$route.path)
this.$router.push({
path:this.Nav[index].router
});
this.TabNav = this.Nav[index].router;
}
},
created(){
console.log(this.$route.path)
}
};
</script>
<style lang="scss">
//....
</style>
//在用到的页面内这样写（如果直接在App.vue 里面引用会不生效）
<footermenu></footermenu>
import footermenu from '@/components/common/FooterMenu'
components: {
footermenu
},
