vue中，点到图标组件进行路由跳转时，如何让图标高亮，请出示比较简单的方式，可以利用vant组件

在 Vant 组件库中，提供了 `Tabbar` 和 `TabbarItem` 组件，可以很方便地实现底部导航栏的效果，而且还内置了图标高亮的功能，非常适合实现图标高亮效果。

下面是一个示例代码：

<template>
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" active-icon="home" to="/home">
        首页
      </van-tabbar-item>
      <van-tabbar-item icon="search" active-icon="search" to="/search">
        搜索
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" active-icon="friends" to="/friends">
        好友
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" active-icon="setting" to="/setting">
        设置
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    }
  }
}
</script>

在上面的示例中，我们使用 `van-tabbar` 和 `van-tabbar-item` 组件来实现底部导航栏效果。对于每个 `van-tabbar-item` 组件，我们可以设置 `icon` 属性和 `active-icon` 属性，分别表示默认状态下和选中状态下的图标。我们还可以使用 `to` 属性来设置路由路径。当用户点击某个 `van-tabbar-item` 组件时，会自动进行路由跳转，并高亮对应的图标。

在 `van-tabbar` 组件上，我们使用 `v-model` 指令来绑定当前选中的 `van-tabbar-item` 的索引，从而实现默认选中和切换选中状态的效果。