title: How do you use ion-tabs with IonicVueRouter in Ionic (vue.js)?
body: <h2>Background</h2>
  <p>I am making a exercise warm-up app. I've conceptually segmented it into a workout tab and a settings tab. In a linear fashion the workout tab lets one pick a workout plan <code>ChooseWorkout.vue</code> then an exercise <code>ChooseLifts.vue</code> then the weight <code>ChooseWeight.vue</code> and it will display an appropriate warmup.</p>
  <p>The aforementioned components are working correctly and link to each other in the correct linear fashion.</p>
  <h2>What I want to do</h2>
  <p>I want to add tabbed navigation so a user can switch between the settings and the workout portion components of the app. The tabs I am making have a settings button and a workout button.</p>
  <p><a href="https://i.stack.imgur.com/kMe5O.png" rel="nofollow noreferrer">Apps flow</a></p>
  <h2>The problem</h2>
  <p>When I integrate the ion-tabs the main tab buttons correctly display the desired 2 components (<code>ChooseWorkout.vue</code> and <code>Settings.vue</code>) when clicked. But <strong>my problem</strong> is the router no longer
  works. So when I navigate from the <code>ChooseWorkout.vue</code> to the <code>ChooseLifts.vue</code> I get a blank screen, but the tabs at the bottom of the app are visible.</p>
  <p>The url for this navigation is <code>http://localhost:8080/#/lifts/StrongLifts%205x5</code> (it works prior to the ion-tabs integration were <code>&lt;ion-vue-router /&gt;</code> was solely used on <code>main.js</code>).</p>
  <h2>Code</h2>
  <p>App.vue</p>
  <pre><code>&lt;template&gt;
      &lt;div id=&quot;app&quot;&gt;
          &lt;ion-app&gt;
              &lt;ion-tabs&gt;
                  &lt;ion-tab tab=&quot;workout&quot;&gt;
                      &lt;ion-vue-router /&gt;
                  &lt;/ion-tab&gt;
                  &lt;ion-tab tab=&quot;settings&quot;&gt;
                      &lt;Settings /&gt;
                  &lt;/ion-tab&gt;
                  &lt;template slot=&quot;bottom&quot;&gt;
                      &lt;ion-tab-bar&gt;
                          &lt;ion-tab-button tab=&quot;workout&quot;&gt;
                              &lt;ion-icon name=&quot;body-outline&quot; /&gt;
                              &lt;ion-label&gt;Workouts&lt;/ion-label&gt;
                          &lt;/ion-tab-button&gt;
                          &lt;ion-tab-button tab=&quot;settings&quot;&gt;
                              &lt;ion-icon name=&quot;body-outline&quot; /&gt;
                              &lt;ion-label&gt;Settings&lt;/ion-label&gt;
                          &lt;/ion-tab-button&gt;
                      &lt;/ion-tab-bar&gt;
                  &lt;/template&gt;
              &lt;/ion-tabs&gt;
          &lt;/ion-app&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  COPY TO CLIPBOARD    SELECT ALL
  </code></pre>
  <p>ChooseWorkout.vue</p>
  <pre><code>&lt;template&gt;
    &lt;ion-page&gt;
      &lt;ion-header&gt;
        &lt;ion-toolbar color=&quot;primary&quot;&gt;
          &lt;ion-title&gt;Choose Workout&lt;/ion-title&gt;
        &lt;/ion-toolbar&gt;
      &lt;/ion-header&gt;
      &lt;ion-content padding&gt;
        &lt;ion-list&gt;
          &lt;div v-for=&quot;workout in workouts&quot; v-bind:key=&quot;workout&quot;&gt;
              &lt;ion-item&gt;
                  &lt;ion-label&gt;
                      &lt;h1&gt;{{workout.name}}&lt;/h1&gt;
                      &lt;p&gt;{{workout.by}}&lt;/p&gt;
                  &lt;/ion-label&gt;
                  &lt;router-link :to=&quot;{path:`lifts/${workout.name} `}&quot;&gt;
                      &lt;ion-button&gt;Select&lt;/ion-button&gt;
                  &lt;/router-link&gt;
              &lt;/ion-item&gt;
          &lt;/div&gt;
        &lt;/ion-list&gt;
      &lt;/ion-content&gt;
    &lt;/ion-page&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { add } from &quot;ionicons/icons&quot;;
  import { addIcons } from &quot;ionicons&quot;;
  
  addIcons({
    &quot;ios-add&quot;: add.ios,
    &quot;md-add&quot;: add.md
  });
  
  export default {
      name: 'ChooseWorkout',
      data() {
          return {
              workouts: [
                  {name: 'Starting Strength', by: 'Mark Rippetoe'},
                  {name: 'StrongLifts 5x5', by: 'Mehdi'},
                  {name: 'GreySkull LP', by: 'John Sheaffer'},
                  {name: 'Max Single', by: 'n/a'}
              ]
          }
      },
      methods: {
      }
  };
  &lt;/script&gt;
  
  &lt;style scope&gt;&lt;/style&gt;
  </code></pre>
  <p>main.js</p>
  <pre><code>
  const router = new IonicVueRouter({
    routes: [
      {
        path: &quot;/&quot;,
        redirect: &quot;/workout&quot;
      },
      {
        path: &quot;/settings&quot;,
        name: &quot;settings&quot;,
        component: Settings
      },
      {
        path: &quot;/workout&quot;,
        component: ChooseWorkout
      },
      {
        path: &quot;/lifts/:workout&quot;,
        component: ChooseLifts
      },
      {
        path: &quot;/lifts/:workout/:excercise&quot;,
        component: ChooseWeight
      },
    ]
  });
  </code></pre>