当我在 vue ionic 中切换组件时如何关闭 ionic 选项卡？

Question

我正在尝试从 tabe 组件导航到 workOrder 组件。我正在使用默认的离子标签。

问题是当我从选项卡 1 切换到 worOrder 组件时，它工作得很好，但它也渲染了以前的组件，即选项卡组件

这是选项卡 1 的组件

但是当我从侧面菜单中选择工作订单时，它也会将选项卡呈现为一个组件

我想从这个问题中走出来

这是我用来切换的侧边菜单

<template>

 <ion-menu side="start" content-id="menu-content">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>{{userInfo.name}}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content id="menu-content">
      <ion-list lines="full">
      
        <ion-item v-for="item in items" :key="item.name">
           <ion-button :router-link="item.href">
          <ion-icon :name="item.icon" slot="start" ></ion-icon>
          <ion-label>{{ item.name }} </ion-label>
           </ion-button>
        </ion-item>
       
      </ion-list>
    </ion-content>
  </ion-menu>
</template>
<style>
.my-custom-menu {
  --width: 500px;
}
</style>

<script>
import { 
  IonContent, 
  IonHeader, 
  IonItem, 
  IonList, 
  IonMenu, 
  IonTitle, 
  IonToolbar,
  IonButton
} from '@ionic/vue';
import { defineComponent } from 'vue';
import { TokenService } from "@/services/token.service";

export default defineComponent({
  components: {
    IonContent, 
    IonHeader, 
    IonItem, 
    IonList, 
    IonMenu, 
    IonButton,

    IonTitle, 
    IonToolbar
  },
  data(){
    return {
       items: [
         { name: 'Home', icon: 'home', href: '/tabs/tab1' },
        { name: 'Work Orders', icon: 'home', href: '/gang-boss-work-orders' },
        { name: 'Log out', icon: 'logout', href: 'logout' }
      ],
       userInfo: TokenService.getUserInfo(),
    }
  },
 beforeMount(){
   console.log(JSON.stringify(this.userInfo))
 }
});
</script>

这是工单组件

<template>
<ion-page>
  <ion-header>
    <ion-toolbar>
      <ion-title>Work Orders</ion-title>
      <ion-buttons slot="start">
        <ion-menu-button auto-hide="false"></ion-menu-button>
      </ion-buttons>
      <ion-buttons slot="primary">
        <ion-button color="secondary" @click="handleSignOut">
          <ion-icon slot="icon-only" :icon="logOut"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-buttons slot="primary"> </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <!-- List of Text Items -->
  <ion-list>
    <ion-item v-for="(work_order, index) in this.work_orders" :key="index">
      <ion-label
        >{{ work_order.id }} - {{ work_order.meeting_location }} | Cutting
        Company: {{ work_order.cutting_company_details.staffs.name }}
      </ion-label>
    </ion-item>
  </ion-list>
  </ion-page>
  <side-menu />

</template>

<script>
import { IonItem, IonList, IonLabel } from "@ionic/vue";
import SideMenu from "../SideMenu.vue";
import ApiService from "../../services/api.service";
import { TokenService } from "@/services/token.service";

export default {
  components: {
    IonItem,
    IonList,
    IonLabel,
    SideMenu,
    
  },
  data() {
    return {
      work_orders: null,
    };
  },
  methods: {
    getWorkOrders: function () {
      const boss_id = TokenService.getUserInfo().role_details.id;

      return ApiService.get(`/api/gangBoss/workOrders/view/${boss_id}`).then(
        (response) => {
          this.work_orders = response.data;
          console.log(this.work_orders);
          console.log(response.data);
        }
      );
    },
  },
  mounted() {
    this.getWorkOrders();
  },
};
</script>

路由器文件

import { createRouter, createWebHistory } from '@ionic/vue-router';

import Tabs from '../views/Tabs.vue'
import SignIn from "@/views/Signin.vue";
import Signup from "@/views/Signup.vue";
import { TokenService } from "@/services/token.service";

const routes = [
  {
    path: '/',
    redirect: '/tabs/tab1'
  },
  {
    path: '/gang-boss-work-orders',
    component: () => import('@/views/GangBoss/WorkOrder.vue')
  },
  {
    path: '/tabs/',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: 'tab1'
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      },
      {
        path: 'tab2',
        component: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab3',
        component: () => import('@/views/Tab3.vue')
      },
      
    ]
  },
  {
    path: '/login',
    component: SignIn,
    meta: {
      public: true,
      onlyWhenLoggedOut: true
    }
  },
  {
    path: '/signup',
    component: Signup,
    meta: {
      public: true,
      onlyWhenLoggedOut: true
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  const isPublic = to.matched.some(record => record.meta.public);
  const onlyWhenLoggedOut = to.matched.some(
      record => record.meta.onlyWhenLoggedOut
  );
  const loggedIn = !!TokenService.getToken();

  if (!isPublic && !loggedIn) {
    return next({
      path: "/login",
      query: { redirect: to.fullPath }
    });
  }

  if (loggedIn && onlyWhenLoggedOut) {
    return next("/tabs/tab1");
  }

  next();
});

export default router

Answer 1

您的页面上没有离子含量部分
为什么“ ”在工单组件页面的底部？

当我在 vue ionic 中切换组件时如何关闭 ionic 选项卡？

how to ionic tab close when i switch component in vue ionic?

javascript

ionic-framework

vue.js

ionic4

ionic-vue