可以使用 Vue Router 的导航守卫功能实现该需求，具体实现步骤如下：
- 在 Router 实例中定义一个全局的
beforeEach导航守卫，用于判断当前路由是否需要隐藏某个全局组件：
import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ // 路由配置 ], }); // 全局导航守卫 router.beforeEach((to, from, next) => { if (to.meta.hideComponent) { // 判断是否需要隐藏组件 to.meta.hideComponent.hide = true; } else { next(); } });
- 2.在需要隐藏全局组件的页面路由中添加
meta属性，用于指示需要隐藏的组件，并将组件的hide属性初始值设置为false
const routes = [ { path: '/some-page', component: SomePage, meta: { hideComponent: { // 指示需要隐藏的组件 component: GlobalComponent, hide: false, // 初始为 false }, }, }, ];
- 3.在全局组件中绑定
hide属性，判断是否需要隐藏组件：
<template> <div v-if="!hide"> <!-- 组件内容 --> </div> </template> <script> export default { props: ['hide'], }; </script>
