<template> <div id="foot"> <div class="tabBar"> <div class="menu"><p class="cont"> <router-link to=‘/‘><img src="./img/tabBar1.png" class="src" height="47px" ></router-link><span v-bind:class="{active:routerCurrent==1}"> 首页</span> </p></div> <div class="menu"><p class="cont"> <router-link to=‘/SignIn‘><img src="./img/tabBar2.png" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==2}"> 签到</span> </p></div> <div class="menu"><p class="cont"> <router-link to=‘/prize‘><img src="./img/tabBar3.png" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==3}"> 福利</span> </p></div> <div class="menu"><p class="cont"> <router-link to=‘/my‘><img src="./img/tabBar4.png" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==4}"> 我的</span> </p></div> </div> </div> </template> <script> export default { data(){ return{ routerCurrent :1 , } }, created () { this.getRouter(); }, watch: { $route() { this.getRouter(); } }, methods: { //获取当前处于哪一个路由 getRouter() { if (this.$route.path == "/") { this.routerCurrent = 1; } if (this.$route.path == "/SignIn") { this.routerCurrent = 2; } if (this.$route.path == "/prize") { this.routerCurrent = 3; } if (this.$route.path == "/my") { this.routerCurrent = 4; } console.log(this.$route.path); }, }, mounted () { } } </script> <style scoped lang="scss"> #foot{ height: 1.47rem; position: fixed; width: 100vw; background: #fff; bottom: 0; .active{ color: #e4007f; } .tabBar{ margin: 0 0.2rem; height:100%; display: flex; text-align:center; display:-webkit-flex; flex-wrap:nowrap; flex-direction:reverse; justify-content:space-between; .menu{ a{ display: block; margin: 0.1rem auto -0.25rem; } span{ font-size: 16px; } } } } </style>
上面的是组件,下面的是调用
<template> <div id="my"> <div class="head"></div> <div class="pic"> <div class="cover"> <i class="el-icon-message"></i> </div> </div> <!-- 底部nav --> <foot :parentMessage="routerPath"></foot> </div> </template> <script> import foot from ‘@/components/foot/foot‘ export default { data(){ return{ routerPath:‘‘ } }, components: { foot }, mounted () { this.routerPath=this.$route.path // console.log(this.$route.path);background: url(‘../assets/img/my-bg.png‘) no-repeat; } } </script> <style scoped lang="scss"> #my{ .pic{ height: 6.53rem; position: relative; background-size:cover; .cover{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; background: rgba(0, 0, 0, 0.5); } } } </style>