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

问题描述

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

问题是当我从选项卡 1 切换到 wordOrder 组件时，它运行良好，但它也会呈现作为选项卡组件的前一个组件

这是选项卡 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,IonButton,IonToolbar
  },data(){
    return {
       items: [
         { name: 'Home',icon: 'home',href: '/tabs/tab1' },{ name: 'Work Orders',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,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,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,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

解决方法

1. 您的页面上没有离子内容部分
2. 为什么“ ”在工作订单组件页面的底部？