如何通过Vue Router实现全局鼠标悬停光标切换效果？

不用逐路由重复写逻辑，这里有两个简洁的全局实现方案：

方案一：全局混入（Mixin） #

把光标切换的逻辑抽成全局混入，所有组件自动继承该逻辑：

1. 创建混入文件 src/mixins/cursorMixin.js：

export default {
  data() {
    return {
      cursorActive: false
    };
  },
  methods: {
    handleCursorHover(isActive) {
      this.cursorActive = isActive;
    }
  }
}

2. 在 main.js 中全局注册混入：

import { createApp } from 'vue'
import App from './App.vue'
import cursorMixin from './mixins/cursorMixin'

const app = createApp(App)
app.mixin(cursorMixin) // 全局注册
app.mount('#app')

3. 在任意组件模板中直接使用：

<main :class="{ inactiveCursor: !cursorActive, activeCursor: cursorActive }">
  <!-- 链接元素 -->
  <a @mouseover="handleCursorHover(true)" @mouseleave="handleCursorHover(false)">链接</a>
  <!-- div元素 -->
  <div @mouseover="handleCursorHover(true)" @mouseleave="handleCursorHover(false)">自定义元素</div>
</main>

这个方案的好处是可以在组件内直接访问 cursorActive 状态，方便扩展其他关联逻辑。

方案二：自定义全局指令（更简洁） #

如果只是需要切换光标样式，不需要在组件内操作状态，用自定义指令更干净：

1. 在 main.js 中注册全局指令：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('cursor-toggle', {
  mounted(el) {
    // 获取根main元素（如果你的main是固定根容器，也可以直接通过document.querySelector获取）
    const mainEl = document.querySelector('main')
    if (!mainEl) return

    // 绑定鼠标事件
    el.addEventListener('mouseover', () => {
      mainEl.classList.remove('inactiveCursor')
      mainEl.classList.add('activeCursor')
    })
    el.addEventListener('mouseleave', () => {
      mainEl.classList.remove('activeCursor')
      mainEl.classList.add('inactiveCursor')
    })
  },
  unmounted(el) {
    // 销毁时移除事件监听，避免内存泄漏
    const mainEl = document.querySelector('main')
    if (!mainEl) return

    el.removeEventListener('mouseover', () => {
      mainEl.classList.remove('inactiveCursor')
      mainEl.classList.add('activeCursor')
    })
    el.removeEventListener('mouseleave', () => {
      mainEl.classList.remove('activeCursor')
      mainEl.classList.add('inactiveCursor')
    })
  }
})

app.mount('#app')

2. 在组件模板中直接给需要的元素加指令即可，无需任何组件逻辑：

<main class="inactiveCursor">
  <!-- 链接元素 -->
  <a v-cursor-toggle>链接</a>
  <!-- div元素 -->
  <div v-cursor-toggle>自定义元素</div>
</main>

这个方案完全不需要在组件内写任何状态或方法，所有逻辑封装在指令里，代码更简洁，适合纯样式切换的场景。

内容的提问来源于stack exchange，提问作者user22556237