如何结合HeadlessUI Menu与Vue-Router实现带哈希的路由跳转？

核心思路 #

HeadlessUI菜单组件默认仅支持字符串形式的href，但我们可以通过手动监听点击事件、阻止默认跳转的方式，结合Vue Router的编程式导航，实现命名路由+锚点哈希的跳转需求。

具体实现方案 #

1. 改造菜单点击逻辑

放弃使用HeadlessUI组件自带的href属性，转而绑定点击事件，在事件回调中执行编程式路由跳转，并处理锚点滚动。

2. Vue 2 代码示例

<template>
  <Menu>
    <MenuButton class="...">打开菜单</MenuButton>
    <MenuItems class="...">
      <!-- 遍历菜单项，绑定点击事件 -->
      <MenuItem v-for="item in menuItems" :key="item.routeName">
        <a 
          @click.prevent="handleMenuJump(item)" 
          class="...">
          {{ item.label }}
        </a>
      </MenuItem>
    </MenuItems>
  </Menu>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { label: '首页', routeName: 'Home', hash: '' },
        { label: '关于我们', routeName: 'About', hash: '#team' },
        { label: '服务', routeName: 'Services', hash: '#pricing' }
      ]
    };
  },
  methods: {
    handleMenuJump(item) {
      // 调用Vue Router编程式导航
      this.$router.push({
        name: item.routeName,
        hash: item.hash
      }).then(() => {
        // 跳转完成后滚动到指定锚点（如果有hash）
        if (item.hash) {
          const targetElement = document.querySelector(item.hash);
          if (targetElement) {
            targetElement.scrollIntoView({ behavior: 'smooth' });
          }
        }
      });
    }
  }
};
</script>

3. Vue 3 代码示例（Composition API）

<template>
  <Menu>
    <MenuButton class="...">打开菜单</MenuButton>
    <MenuItems class="...">
      <MenuItem v-for="item in menuItems" :key="item.routeName">
        <a 
          @click.prevent="handleMenuJump(item)" 
          class="...">
          {{ item.label }}
        </a>
      </MenuItem>
    </MenuItems>
  </Menu>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const menuItems = [
  { label: '首页', routeName: 'Home', hash: '' },
  { label: '关于我们', routeName: 'About', hash: '#team' },
  { label: '服务', routeName: 'Services', hash: '#pricing' }
];

const handleMenuJump = (item) => {
  router.push({
    name: item.routeName,
    hash: item.hash
  }).then(() => {
    if (item.hash) {
      const targetElement = document.querySelector(item.hash);
      targetElement?.scrollIntoView({ behavior: 'smooth' });
    }
  });
};
</script>

关键说明 #

• 使用@click.prevent阻止a标签的默认跳转行为，避免页面刷新
• 通过$router.push（Vue2）或router.push（Vue3）传入命名路由和哈希参数，实现精准跳转
• 跳转完成后手动调用scrollIntoView控制锚点滚动，支持平滑滚动效果（可根据需求调整behavior参数）

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