导航栏问题解决

在做毕设的时候遇到一个问题，我自己做了一个导航栏（用了vue框架），
点击导航栏某一项后浏览器的路由会发生变化，会跳转到对应的页面，
且该项的背景色会与其他项不一样。当点击导航栏某一项，页面跳转后，
点击浏览器的刷新按钮，这时候浏览器的路由还是跳转后的路由，
页面也还是跳转后的页面，但导航栏的样式出错了，
变成了第一项的样式与其他项不一样，原因是我使用了下标来做判断，
而每次刷新后下标都会置为0（即第一项），
因此不能用下标做判断，
我换成以下方式后完美解决问题：

<template>
  <div class="navb">
    <ul>
      <li
        v-for="(item, index) in 4"
        :key="index"
        :class="{ yellow: navRouter[index] === $route.path }"
        //用当前活跃的路由路径去与项目中所有的路由路径做判断
        @click="aa(index)"
      >
        {{ index + 1 }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      navRouter: {
      //项目中所有的路由路径集合
        0: "/home",
        1: "/register_or_login",
      },
    };
  },
  methods: {
    aa(index) {
      const currentPath = this.$route.path;
      const isRepeat = currentPath.includes(this.navRouter[index]);
      if (!isRepeat) {
        this.$router.push(this.navRouter[index]);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.navb {
  width: 100%;
  height: 40px;
  ul {
    display: flex;
    li {
      width: 25%;
      height: 50px;
      background-color: white;
    }
  }
  .yellow {
    background-color: yellow;
  }
}
</style>