Ionic App中点击router-link时隐藏侧边导航Overlay的方法

针对你在Ionic App.vue中实现的overlay类型侧边导航，点击带有router-link="/trending"的ion-item时隐藏菜单，有几种实用的实现方式：

方法1：直接给目标项绑定点击事件关闭菜单 #

利用Ionic的MenuController，在点击目标ion-item时主动调用菜单关闭方法，同时保留路由导航功能：

首先在App.vue的脚本部分引入并初始化菜单控制器：

<script setup>
import { MenuController } from '@ionic/vue';

// 创建菜单控制器实例
const menuCtrl = MenuController.create();

// 定义关闭菜单的方法
const closeSideMenu = async () => {
  const menu = await menuCtrl;
  await menu.close();
};
</script>

然后在模板中给目标ion-item添加点击事件：

<ion-menu content-id="main-content" type="overlay">
  <ion-header>
    <ion-toolbar>
      <ion-title>菜单</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <!-- 目标项：绑定点击事件关闭菜单 -->
      <ion-item router-link="/trending" @click="closeSideMenu">
        <ion-label>Trending</ion-label>
      </ion-item>
      <!-- 其他菜单项 -->
      <ion-item router-link="/home">
        <ion-label>首页</ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-router-outlet id="main-content"></ion-router-outlet>

方法2：通过路由守卫全局处理 #

如果希望只要导航到/trending路径就自动关闭菜单（不管从哪个入口导航），可以使用Vue Router的后置守卫：

<script setup>
import { MenuController } from '@ionic/vue';
import { useRouter } from 'vue-router';

const menuCtrl = MenuController.create();
const router = useRouter();

// 路由后置守卫：导航完成后执行
router.afterEach(async (to) => {
  if (to.path === '/trending') {
    const menu = await menuCtrl;
    await menu.close();
  }
});
</script>

这种方式无需修改菜单模板，只要路由匹配就会自动关闭菜单，适合需要全局触发的场景。

方法3：指定菜单ID精准关闭（可选） #

如果你的侧边导航有自定义ID（比如<ion-menu id="side-menu" type="overlay">），可以直接通过ID指定关闭目标菜单，避免影响其他可能存在的菜单：

// 方法1中的closeSideMenu可以修改为：
const closeSideMenu = async () => {
  const menu = await menuCtrl;
  await menu.close('side-menu');
};

// 方法2中的路由守卫也可以修改为：
router.afterEach(async (to) => {
  if (to.path === '/trending') {
    const menu = await menuCtrl;
    await menu.close('side-menu');
  }
});

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