vue 公用导航路由切换 改变样式

<template>
  <div class="tabbar">
    <router-link v-for="(item, index) in navlist" :to="item.url" @clik.native="linkTo(item.url)" exact>
      <img  v-if="$route.path.indexOf(item.url) !== -1" :src="item.imged" alt="">
      <img v-else :src="item.img" alt="">
      <span>{{item.text}}</span>
    </router-link>
  </div>
</template>

<script>
 
  export default {
    name: '',
    data() {
      return {
        navlist:[{
          imged:'/static/images/tab1_ed.png',
          img:'/static/images/tab1.png',
          text:'积分兑换',
          url:'activity'
        },
        {
          imged:'/static/images/tab2_ed.png',
          img:'/static/images/tab2.png',
          text:'附近站点',
          url:'nearbysites'
        },{
          imged:'/static/images/tab3_ed.png',
          img:'/static/images/tab3.png',
          text:'订单',
          url:'orderlist'
        },{
          imged:'/static/images/tab4_ed.png',
          img:'/static/images/tab4.png',
          text:'个人中心',
          url:'personalcenter'
        }],
        isActive:1,
      }
    },
    methods: {
      linkTo:function(index){
        this.$router.replace(path)   
      }
    },
  }
</script>