如何在Vue中将下拉菜单渲染到其他页面时关闭下拉菜单

<template>
  <div>
    <!-- 下拉菜单组件 -->
    <DropdownMenu :isOpen="isDropdownOpen" @toggle="toggleDropdown" />

    <!-- 页面切换按钮 -->
    <button @click="changePage">切换页面</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import DropdownMenu from './DropdownMenu.vue'; // 假设这是你的下拉菜单组件

export default {
  components: {
    DropdownMenu
  },
  setup() {
    const isDropdownOpen = ref(false);

    function toggleDropdown() {
      isDropdownOpen.value = !isDropdownOpen.value;
    }

    function changePage() {
      // 在这里处理页面切换的逻辑
      // ...

      // 关闭下拉菜单
      isDropdownOpen.value = false;
    }

    return {
      isDropdownOpen,
      toggleDropdown,
      changePage
    };
  }
};
</script>

import { createRouter, createWebHistory } from 'vue-router';
import { ref } from 'vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...定义路由
  ]
});

const isDropdownOpen = ref(false);

router.beforeEach((to, from, next) => {
  isDropdownOpen.value = false; // 关闭下拉菜单
  next();
});

export default router;