怎么让导航栏切换的时候把图标也切换了？

<div class="nav-div">
          <div v-for="(menu,index) in menuList" :key="index">
           <router-link :to="{path:menu.url}">
            <span><img :src="menu.img" alt=""></span>
            <p>{{menu.name}}</p>
            </router-link>
          </div>
        </div>



menuList: [
        {
          name:'首页',
          img:require('../../images/Index/home-act.png'),
          url:'/indexKG',
          active:require('../../images/Index/home.png'),
        },
         {
          name:'设备监控',
          img:require('../../images/Index/monitor-act.png'),
          url:'/equipment',
          active:require('../../images/Index/monitor.png'),
        },
         {
          name:'能耗分析',
          img:require('../../images/Index/statistics-act.png'),
          url:'/consumption'
        },
         {
          name:'综合报表',
          img:require('../../images/Index/Report-act.png'),
          url:'/comprehensive'
        },
         {
          name:'故障报警',
          img:require('../../images/Index/faultAlarm-act.png'),
          url:'/fault'
        },
         {
          name:'工单管理',
          img:require('../../images/Index/Operation-act.png'),
          url:'/workorder'
        },
        {
          name:'系统管理',
          img:require('../../images/Index/manage-act.png'),
          url:'/system'
        }
      ],

在路由配置的地方给每个路由添加name，一般是把path的第一个字母大写。
比如首页的：{ name: 'IndexKG', path: 'indexKG' }，
在menuList每个对象里加个参数routeName，跟路由配置的name写成一样
img标签绑定src改成 :src=" $route.name == menu.routeName ? menu.active : menu.img "

好像穿越了，这个怎么看怎么眼熟