Vue <浏览器后退点击导航栏样式不照应问题>

首先你需要封装一个公共的组件，我这里是 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
  },