如何在Nuxt.js中正确实现图标链接的悬停效果

在Nuxt.js中实现图标链接的悬停效果，你可以按照以下步骤进行操作：

首先，在Nuxt.js项目中安装所需的图标库，例如Font Awesome。你可以使用以下命令安装依赖：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome

在Nuxt.js项目的nuxt.config.js文件中，添加以下代码以引入FontAwesome图标库：

// nuxt.config.js

module.exports = {
  // ...
  modules: [
    '@nuxtjs/fontawesome'
  ],
  fontawesome: {
    icons: {
      solid: true
    }
  }
  // ...
}

创建一个全局组件来使用图标链接，并在其中实现悬停效果。在你的Nuxt.js项目中，可以新建一个名为IconLink.vue的文件，并添加以下代码：

<!-- IconLink.vue -->

<template>
  <a class="icon-link" :href="link" :title="title">
    <font-awesome-icon :icon="icon" :class="{ 'hovered': hovered }" />
  </a>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

export default {
  components: {
    FontAwesomeIcon
  },
  props: {
    icon: {
      type: Array,
      required: true
    },
    link: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      hovered: false
    }
  }
}
</script>

<style scoped>
.icon-link {
  display: inline-block;
  transition: color 0.3s;
}

.icon-link:hover {
  color: red; /* 修改为你想要的悬停颜色 */
}

.hovered {
  color: red; /* 修改为你想要的悬停颜色 */
}
</style>

在需要使用图标链接的页面或组件中，引入刚刚创建的IconLink组件，并传入相应的属性。例如：

<template>
  <div>
    <IconLink :icon="['fas', 'home']" link="/" title="Home" />
    <IconLink :icon="['fas', 'envelope']" link="/contact" title="Contact" />
  </div>
</template>

<script>
import IconLink from '@/components/IconLink.vue'

export default {
  components: {
    IconLink
  }
}
</script>

通过以上步骤，你可以在Nuxt.js项目中正确实现图标链接的悬停效果。当鼠标悬停在图标链接上时，链接的颜色会变化（在示例代码中，变为红色）。你可以根据需求自定义悬停时的颜色，并将图标链接的link属性和title属性修改为你需要的目标链接和标题。