在Vue中实现随hash改变响应菜单高亮

在Vue中实现随hash改变响应菜单高亮的完整攻略如下：

在Vue中实现随hash改变响应菜单高亮的完整攻略如下：

1. 绑定类样式

在Vue中，我们可以使用:class属性绑定给定的class名称。因此，我们可以在菜单项中使用一个计算属性来决定当前菜单是否被选中，并在该菜单项上绑定class进行高亮显示。

示例代码：

<template>
  <div id="app">
    <ul>
      <li :class="{ 'active': isCurrent('home') }"><a href="#home">Home</a></li>
      <li :class="{ 'active': isCurrent('about') }"><a href="#about">About</a></li>
      <li :class="{ 'active': isCurrent('contact') }"><a href="#contact">Contact</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    isCurrent(hash) {
      return window.location.hash === '#' + hash;
    }
  }
}
</script>

<style>
.active {
  background-color: #f00;
  color: #fff;
}
</style>

在该示例中，我们在每个菜单项上使用:class属性，并使用对象语法绑定样式类名。对象中的键是要应用的样式类名，值是布尔表达式，根据表达式求值结果来决定是否应用该样式类。例如，当isCurrent('home')返回true时，菜单项上的'active'类将被添加。

在isCurrent方法中，我们检查window.location.hash是否与指定的哈希值匹配。如果匹配，我们返回true，否则返回false。这使得每次哈希值改变时，我们都可以通过重新计算绑定的类样式来更新菜单项的高亮显示状态。

2. 监听hashchange事件

虽然绑定类样式方式可以实现菜单高亮效果，但需要在组件渲染后才会生效。另一种实现方式是使用window对象的hashchange事件来实时更新菜单高亮状态。

示例代码：

<template>
  <div id="app">
    <ul>
      <li :class="{ 'active': current === 'home' }"><a href="#home">Home</a></li>
      <li :class="{ 'active': current === 'about' }"><a href="#about">About</a></li>
      <li :class="{ 'active': current === 'contact' }"><a href="#contact">Contact</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: ''
    }
  },
  mounted() {
    window.addEventListener('hashchange', this.updateCurrent);
    this.updateCurrent(); // 初始化当前选中菜单
  },
  beforeDestroy() {
    window.removeEventListener('hashchange', this.updateCurrent);
  },
  methods: {
    updateCurrent() {
      this.current = window.location.hash.substr(1); // 去掉hash符号
    }
  }
}
</script>

<style>
.active {
  background-color: #f00;
  color: #fff;
}
</style>

在该示例中，我们创建了一个current数据属性来表示当前选中的菜单项。在组件挂载后，我们绑定了一个hashchange事件处理函数updateCurrent，以便在hash值改变时及时更新current属性。我们同时也调用了updateCurrent方法，以确保在组件挂载时初始化当前选中菜单。

在updateCurrent方法中，我们使用window.location.hash获取当前的hash值，并使用substr方法去掉hash符号。这使得在更新current属性时，我们只需要存储菜单项的标识符，而不是整个hash值。

在组件销毁前，我们移除了hashchange事件监听器，以防止出现内存泄漏等问题。

通过这两种方式，我们可以方便快捷地实现随hash值变化而更新菜单高亮的功能，提升网页的用户体验。