Using toolbar with menu as a component

Ionic Framework Ionic Vue
1

Hey,

This is my first Vue/ Ionic project and I am having trouble reusing a component that wraps a toolbar with a back button and a menu-button that toggles a menu. I want to use that component on all of my views except the login/signup page. So I thought it makes sense to create a component instead of redefining the menu every time. It takes props for the title and a boolean to decide whether or not a back button should be shown. The component works totally fine but if I use the menu to navigate to another page and use the back button the whole menu-button stops working and the menu is not able to toggle until I refresh.
Is there a best practice to use a toolbar with a menu through your whole application without repeating yourself or am I doing something wrong?

<template>
    <ion-menu side="end" content-id="main-content">
       ...
    </ion-menu>

    <div id="main-content">
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start" v-if="hasBackButton">
            <ion-back-button default-href="/home"></ion-back-button>
          </ion-buttons>
          <ion-title>{{ title }}</ion-title>
          <ion-buttons slot="end">
            <ion-menu-button></ion-menu-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
    </div>
</template>
2

Not a recommended approach, it is best to let ionic manage the navigation with the back button and proper routing. I suggest you start with a template and go from there

3

Thanks for your reply I got it to work by seperating the ion-menu component from the toolbar and I integrate it globally into App.vue like this.

  <ion-app>
    <Menu />
    <ion-router-outlet id="main-content" />
  </ion-app>