vue router-link 如何延时跳转?

Question

想让router-link 在跳转之前改变一下颜色

<router-link tag="li" class="bar" to="/orderList">
  <span>我的订单</span>
  <span class="icon-keyboard_arrow_right tr"></span>
  <span class="dt">查看全部订单</span>
</router-link>
<router-link tag="li" class="bar" to="/addrList">
  <span>收货地址</span>
  <span class="icon-keyboard_arrow_right tr"></span>
</router-link>
<div class="divider"></div>
<router-link tag="li" class="bar" to="/statement">
  <span >免责声明</span>
  <span class="icon-keyboard_arrow_right tr"></span>
</router-link>
<router-link tag="li" class="bar" to="/note">
  <span>支付说明</span>
  <span class="icon-keyboard_arrow_right tr"></span>
</router-link>


.bar
    margin-bottom: .6rem
    padding: 0 3rem
    height: 4.2rem
    font-size: 1.4rem
    line-height: 4.2rem
    background: #fff
    &.active
      background: tomato
      

总是一下就跳到下一个用户了 看不到变颜色的瞬间
这种情况,必须自己用js脚本跳转吗

Answer 1

使用钩子函数可以实现吧