Vue Router history模式下点击父菜单触发favicon请求而非展开子菜单

嘿，我刚看完你的问题，这事儿我之前也碰到过——在Vue Router的History模式下，带href="#"的父菜单点击后不展开子菜单反而触发favicon请求，核心原因是这个#触发了浏览器的默认导航行为，干扰了你的子菜单展开逻辑。

下面给你几个靠谱的解决方案，一步步来：

1. 用Vue指令阻止默认跳转（最推荐） #

既然你用Vue开发，直接给父菜单的<a>标签加@click.prevent指令就行，它会自动阻止浏览器的跳转动作，让点击只触发子菜单展开：

<li>
  <a href="#" @click.prevent>
    <i></i> parent menu <i></i>
  </a>
  <ul>
    <li><a href="index-2.html">submenu 1</a></li>
    <li><a href="dashboard-2.html">submenu 2</a></li>
  </ul>
</li>

这样点击父菜单时，就不会触发路由跳转，自然也不会出现莫名其妙的favicon请求了。

2. 替换href为无效值（应急方案） #

如果你暂时不想改Vue指令，也可以把href="#"换成href="javascript:void(0)"，这个值不会触发任何默认导航：

<li>
  <a href="javascript:void(0)">
    <i></i> parent menu <i></i>
  </a>
  <ul>
    <li><a href="index-2.html">submenu 1</a></li>
    <li><a href="dashboard-2.html">submenu 2</a></li>
  </ul>
</li>

不过这种写法可读性不如Vue指令，更推荐第一种方法。

3. 完善子菜单的展开逻辑 #

另外要确保你的子菜单展开逻辑已经正确绑定了。比如在Vue组件里用状态控制显示隐藏，这样更符合Vue的开发习惯：

<template>
  <li>
    <a href="#" @click.prevent="toggleSubmenu">
      <i></i> parent menu <i></i>
    </a>
    <ul v-show="isSubmenuOpen">
      <!-- 子菜单推荐用router-link，适配Vue Router -->
      <li><router-link to="/index-2">submenu 1</router-link></li>
      <li><router-link to="/dashboard-2">submenu 2</router-link></li>
    </ul>
  </li>
</template>

<script>
export default {
  data() {
    return {
      isSubmenuOpen: false
    }
  },
  methods: {
    toggleSubmenu() {
      this.isSubmenuOpen = !this.isSubmenuOpen;
    }
  }
}
</script>

这里用v-show控制子菜单的显示，点击父菜单时切换状态，同时用router-link替代原生<a>，更适配单页应用的路由机制。

最后说下为什么会出现favicon请求：当你点击href="#"时，浏览器会尝试导航到当前页面的根锚点，在Vue Router History模式下，这个动作会被路由拦截处理，过程中可能触发浏览器重新请求favicon.ico——阻止默认跳转后，这个问题就彻底消失了。

内容的提问来源于stack exchange，提问作者ᴜɴᴅᴇғɪɴᴇᴅ