vue3在App.vue写的全局组件让指定页面不显示

可以使用 Vue Router 的导航守卫功能实现该需求,具体实现步骤如下:

  1. 在 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>
    

猜你喜欢

转载自blog.csdn.net/qq_19820589/article/details/131015426