Die von vue3 in App.vue geschriebene globale Komponente führt dazu, dass die angegebene Seite nicht angezeigt wird

Um diese Anforderung zu erfüllen, können Sie die Navigationsschutzfunktion von Vue Router verwenden. Die spezifischen Implementierungsschritte lauten wie folgt:

1. Definieren Sie einen globalen  beforeEach Navigationsschutz in der Router-Instanz, um zu bestimmen, ob die aktuelle Route eine globale Komponente verbergen muss:

   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. Fügen Sie der Seitenroute ein Attribut hinzu, das die globale Komponente ausblenden muss,  meta um die Komponente anzugeben, die ausgeblendet werden muss, und  hide legen Sie den Anfangswert des Attributs der Komponente auf fest false

   const routes = [
     {
       path: '/some-page',
       component: SomePage,
       meta: {
         hideComponent: { // 指示需要隐藏的组件
           component: GlobalComponent,
           hide: false, // 初始为 false
         },
       },
     },
   ];
   

   3. Binden Sie Eigenschaften in der globalen Komponente  hide , um zu bestimmen, ob die Komponente ausgeblendet werden muss:

   <template>
     <div v-if="!hide">
       <!-- 组件内容 -->
     </div>
   </template>
   
   <script>
   export default {
     props: ['hide'],
   };
   </script>