vue中，点到图标组件进行路由跳转时，如何让图标高亮

在 Vue 中，可以通过动态绑定样式来实现图标高亮。具体实现步骤如下：

1. 在路由配置中，给每个路由添加一个唯一的标识符，例如 `name` 属性。

2. 在图标组件中，使用 `router-link` 组件来实现路由跳转，同时绑定 `:to` 属性为对应的路由路径。

3. 给图标组件设置一个自定义类名，例如 `active`。

4. 在路由跳转时，根据当前路由的标识符来判断是否需要高亮图标。可以使用 `$route.name` 来获取当前路由的标识符。

5. 在图标组件上，使用 `v-bind:class` 指令动态绑定样式，根据当前路由是否匹配当前图标对应的路由来添加或删除 `active` 类名。

下面是一个示例代码：

路由配置：

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact
  }
]

图标组件：

<template>
  <router-link :to="path" v-bind:class="{ active: isActive }">
    <i class="icon"></i>
  </router-link>
</template>

<script>
export default {
  props: {
    path: String,
    name: String
  },
  computed: {
    isActive() {
      return this.$route.name === this.name
    }
  }
}
</script>

<style>
.active {
  color: red;
}
</style>

在上面的示例中，我们为图标组件添加了 `path` 和 `name` 两个 props，分别表示图标对应的路由路径和路由标识符。在图标组件中，我们使用 `router-link` 组件来实现路由跳转，同时绑定 `:to` 属性为 `path`。我们还给图标组件设置了一个自定义类名 `active`。

在 `isActive` 计算属性中，我们根据当前路由的标识符 `$route.name` 和当前图标对应的路由标识符 `name` 来判断是否需要高亮图标。如果两者相等，则返回 `true`，否则返回 `false`。在图标组件上，我们使用 `v-bind:class` 指令动态绑定样式，根据 `isActive` 的值来添加或删除 `active` 类名，从而实现图标高亮效果。