解决点击导航栏路径跳转但是激活状态不正确的问题

结构:

<template>
  <div>
    <div class="wrapper">
      <div
        v-for="(item, index) in navList"
        @click="navItemClick(item.path, index)"
        :class="['nav-item', item.path == $route.path ? 'item-active' : '']"
        :key="item.id"
      >
        <router-link tag="div" :to="item.path" class="img-wrapper">
          <img :src="item.url" alt="" />
        </router-link>
        <p class="item-title">{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

js：

//导入需要的图片
import one from "../../../assets/images/navbar/one.png";
import two from "../../../assets/images/navbar/two.png";
import three from "../../../assets/images/navbar/three.png";
import shifendian from "../../../assets/images/navbar/shifendian.png";
import zonghe from "../../../assets/images/navbar/zonghe.png";

export default {
  data() {
    return {
      active: 0,//当前处于活跃状态的导航的索引
      navList: [
        {
          id: 0,
          url: one,
          title: "印证材料封面",
          path: "/declarationform",
        },
        {
          id: 1,
          url: two,
          title: "创建申报表",
          path: "/basicinformation",
        },
        {
          id: 2,
          url: three,
          title: "印证材料制作",
          path: "/selfscoring",
        },
        {
          id: 3,
          url: shifendian,
          title: "失分点明细",
          path: "/confirmationmaterials",
        },
        {
          id: 4,
          url: zonghe,
          title: "综合得分",
          path: "/path1",
        },
      ],
    };
  },
  methods: {
    navItemClick(path, index) {
        this.active = index;
        this.$router.push(path);

    },

  },
};