Vue实现底部导航栏切换页面更换

<style>
    #bottomNavigationFullScreen {
        position: fixed;
        bottom: 0;
        z-index: 9999;
        height: 60px;
        width: 100%;
        -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.117647), 0 1px 4px rgba(0,0,0,.117647);
        box-shadow: 0 1px 6px rgba(0,0,0,.117647), 0 1px 4px rgba(0,0,0,.117647);
        background-color: #fff;
    }
    .bottomNavigation_content {
    }

    .bottomNavigation_li_content {
        height: 60px;
        display: flex;
        justify-content:center;
         align-items: center;
        text-align: center;
    }

    .bottomNavigation_li_public_content {
        flex: 1;
        height: 45px;
        /* margin-left: 3px;
        background-color: #ccc; */
    }
    .bottomNavigation_li_public_content img {
        height: 24px;
        width: 24px;
    }
    .bottomNavigation_li_public_content div {
        position: relative;
        bottom: 3px;
    }

    .no_select {
        font-size: 12px;
        color: #222;
    }

    @keyframes select {
      0% {
        font-size: 12px;
      }
      50% {
        font-size: 13px;
      }
      100% {
        font-size: 14px;
      }
    }
    .select {
        animation: select 0.6s;
        font-size: 14px;
        color: #2196f3;
    }
</style>
<template>
    <div id="bottomNavigationFullScreen">
      <div class="bottomNavigation_content">
        <div class="bottomNavigation_li_content">
            <div class="bottomNavigation_li_public_content"  @click="publicClick('/')">
                <img :src="imagesUrl.homeIcon" alt="">
                <div :class="imagesUrl.homeIcon.indexOf('click_home') === -1 ? 'no_select' : 'select' ">首页</div>
            </div>
            <div class="bottomNavigation_li_public_content" @click="publicClick('/recharge')">
                <img :src="imagesUrl.rechargeIcon" alt="">
                <div :class="imagesUrl.rechargeIcon.indexOf('click_recharge') === -1 ? 'no_select' : 'select' ">充值</div>
            </div>
            <div class="bottomNavigation_li_public_content" @click="publicClick('/more')">
                <img :src="imagesUrl.moreIcon" alt="">
                <div :class="imagesUrl.moreIcon.indexOf('click_more') === -1 ? 'no_select' : 'select' ">更多</div>
            </div>
            <div class="bottomNavigation_li_public_content" @click="publicClick('/my')">
                <img :src="imagesUrl.myIcon" alt="">
                <div :class="imagesUrl.myIcon.indexOf('click_my') === -1 ? 'no_select' : 'select' ">我的</div>
            </div>
        </div>
      </div>
    </div>
</template>
<script>
    export default {
        name: 'bottomNavigation',
        data() {
            return {
                imagesUrl: { // 排版图片使用懒加载
                    homeIcon: './static/img/home/navigation/home.png', // 首页
                    rechargeIcon: './static/img/home/navigation/recharge.png', // 充值
                    moreIcon: './static/img/home/navigation/more.png', // 更多
                    myIcon: './static/img/home/navigation/my.png' // 我的
                }
            }
        },
        activated() {
            if (typeof this.$route.path === 'string') {
                let val = this.$route.path
                // let val = this.$route.path.substring(1, this.$route.path.length)
                // console.log(val)
                switch (val) {
                    case '/':
                        this.imagesUrl.homeIcon = './static/img/home/navigation/click_home.png' // 首页
                        this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                        this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                        this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                        break
                    case '/recharge':
                        this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                        this.imagesUrl.rechargeIcon = './static/img/home/navigation/click_recharge.png' // 充值
                        this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                        this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                        break
                    case '/more':
                        this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                        this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                        this.imagesUrl.moreIcon = './static/img/home/navigation/click_more.png' // 更多
                        this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                        break
                    case '/my':
                        this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                        this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                        this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                        this.imagesUrl.myIcon = './static/img/home/navigation/click_my.png' // 我的
                        break
                }
            } else {
                console.log('不合法参数')
            }
        },
        methods: {
            // 点击切换函数
            clickChang(val) {
                // console.log('点击切换函数' + val)
                if (typeof val === 'string') {
                    switch (val) {
                        case '/':
                            this.imagesUrl.homeIcon = './static/img/home/navigation/click_home.png' // 首页
                            this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                            this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                            this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                            this.$router.push({ path: '/' })
                            // console.log(this.imagesUrl)
                            break
                        case '/recharge':
                            this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                            this.imagesUrl.rechargeIcon = './static/img/home/navigation/click_recharge.png' // 充值
                            this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                            this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                            this.$router.push({ path: '/recharge' })
                            // console.log(this.imagesUrl)
                            break
                        case '/more':
                            this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                            this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                            this.imagesUrl.moreIcon = './static/img/home/navigation/click_more.png' // 更多
                            this.imagesUrl.myIcon = './static/img/home/navigation/my.png' // 我的
                            this.$router.push({ path: '/more' })
                            // console.log(this.imagesUrl)
                            break
                        case '/my':
                            this.imagesUrl.homeIcon = './static/img/home/navigation/home.png' // 首页
                            this.imagesUrl.rechargeIcon = './static/img/home/navigation/recharge.png' // 充值
                            this.imagesUrl.moreIcon = './static/img/home/navigation/more.png' // 更多
                            this.imagesUrl.myIcon = './static/img/home/navigation/click_my.png' // 我的
                            this.$router.push({ path: '/my' })
                            // console.log(this.imagesUrl)
                            break
                    }
                } else {
                    console.log('不合法的传值')
                }
            },
            // 点击导航栏事件
            publicClick(val) {
                // console.log('点击导航栏事件' + val)
                if (typeof val === 'string') {
                    switch (val) {
                        case '/':
                            this.clickChang(val)
                            // this.$router.push({ path: '/' })
                            break
                        case '/recharge':
                            this.clickChang(val)
                            // this.$router.push({ path: '/recharge' })
                            break
                        case '/more':
                            this.clickChang(val)
                            // this.$router.push({ path: '/more' })
                            break
                        case '/my':
                            this.clickChang(val)
                            // this.$router.push({ path: '/my' })
                            break
                    }
                } else {
                    console.log('不合法的传值')
                }
            }
        }
    }
</script>

注意就是 跳转路由自行更换  还有就是 activated 这个生命周期的问题 我是使用了 keepAlive 如果没有使用keepAlive  activated 替换为 created

如何使用组件

</template>
    <div>
      内容
    </div>   
    <bottomNavigation></bottomNavigation>
<template>

<script>
import bottomNavigation from '组件目录' // 底部导航栏
export default {
        components: {
            bottomNavigation
        },
｝
</script>