Vue3+Tailwind+vue-router：路由切换后移动端菜单未关闭

问题核心是：路由切换时没有触发关闭菜单的逻辑，导致菜单保持打开状态。下面是两种直接可行的解决方法：

方案一：监听路由变化（推荐） #

在组件中监听$route对象，只要路由发生变化，就将showMenu设为false。这种方式能覆盖所有路由跳转场景（包括点击菜单项、编程式导航等）。

修改你的<script>部分，添加watch选项：

export default {
  name: 'Navbar',
  data() {
      return {
        showMenu: false,
      };
    },
    methods: {
      toggleNav: function () {
        this.showMenu = !this.showMenu;
        console.log("click")
      },
    },
    // 新增路由监听逻辑
    watch: {
      '$route'() {
        this.showMenu = false;
      }
    }
}

方案二：给菜单项添加点击事件 #

如果只需要处理点击菜单项的场景，可以给每个<router-link>添加原生点击事件，直接关闭菜单：

修改模板中的菜单项：

<li class="text-sm font-bold text-cherry hover:text-pine"><router-link to="/" @click.native="showMenu = false">Home</router-link></li>
<li class="text-sm font-bold text-cherry hover:text-pine"><router-link to="/about" @click.native="showMenu = false">About</router-link></li>
<li class="text-sm font-bold text-cherry hover:text-pine"><router-link to="/career" @click.native="showMenu = false">Career & Edu</router-link></li>
<li class="text-sm font-bold text-cherry hover:text-pine"><router-link to="/contacts" @click.native="showMenu = false">Contact Me</router-link></li>

注：这种方式仅对点击菜单项的跳转生效，编程式导航时不会自动关闭菜单。

另外可以统一汉堡按钮的点击逻辑，把模板里的@click="showMenu = !showMenu"改成@click="toggleNav"，让代码更规范：

<div @click="toggleNav" class="flex md:hidden">
  <button type="button" class="text-pink-800 hover:text-pink-400 focus:outline-none focus:text-pink-400">
    <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
      <path
        fill-rule="evenodd"
        d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
      ></path>
    </svg>
  </button>
</div>

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