What is the process for integrating ion-tabs with IonicVueRouter within an Ionic (vue.js) application?

My Project Idea

I have a vision to create an innovative exercise warm-up application. The app will be divided into two main sections: a workout tab and a settings tab. The user journey will start with selecting a workout plan, then choosing specific exercises, followed by inputting the weight for each exercise to generate a customized warm-up routine.

All the components required for these functionalities are currently operational and seamlessly connected in a linear progression.

Goal of the Project

My objective is to introduce tabbed navigation within the app interface. This feature would allow users to easily switch between the settings section and the workout section using designated tabs labeled as 'Settings' and 'Workout.'

Check out the app flow here

The Challenge I am Facing

After integrating ion-tabs into the application, the main tab buttons properly display the intended components (ChooseWorkout.vue and Settings.vue) upon selection. However, a critical issue arises where the router functionality stops working correctly. As a result, navigating from ChooseWorkout.vue to ChooseLifts.vue leads to a blank screen, even though the tab indicators at the bottom of the app remain visible.

The URL structure during this transition is noted as http://localhost:8080/#/lifts/StrongLifts%205x5 (prior to ion-tabs integration, only was utilized in main.js).

Key Code Snippets

App.vue

<template>
    <div id="app">
        <ion-app>
            <ion-tabs>
                <ion-tab tab="workout">
                    <ion-vue-router />
                </ion-tab>
                <ion-tab tab="settings">
                    <Settings />
                </ion-tab>
                <template slot="bottom">
                    <ion-tab-bar>
                        <ion-tab-button tab="workout">
                            <ion-icon name="body-outline" />
                            <ion-label>Workouts</ion-label>
                        </ion-tab-button>
                        <ion-tab-button tab="settings">
                            <ion-icon name="body-outline" />
                            <ion-label>Settings</ion-label>
                        </ion-tab-button>
                    </ion-tab-bar>
                </template>
            </ion-tabs>
        </ion-app>
    </div>
</template>
COPY TO CLIPBOARD    SELECT ALL

ChooseWorkout.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Choose Workout</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <ion-list>
        <div v-for="workout in workouts" v-bind:key="workout">
            <ion-item>
                <ion-label>
                    <h1>{{workout.name}}</h1>
                    <p>{{workout.by}}</p>
                </ion-label>
                <router-link :to="{path:`lifts/${workout.name} `}">
                    <ion-button>Select</ion-button>
                </router-link>
            </ion-item>
        </div>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script>
import { add } from "ionicons/icons";
import { addIcons } from "ionicons";

addIcons({
  "ios-add": add.ios,
  "md-add": 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: {
    }
};
</script>

<style scope></style>

main.js


const router = new IonicVueRouter({
  routes: [
    {
      path: "/",
      redirect: "/workout"
    },
    {
      path: "/settings",
      name: "settings",
      component: Settings
    },
    {
      path: "/workout",
      component: ChooseWorkout
    },
    {
      path: "/lifts/:workout",
      component: ChooseLifts
    },
    {
      path: "/lifts/:workout/:excercise",
      component: ChooseWeight
    },
  ]
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to free up memory after receiving responseText in a continuous streaming request?

Utilizing xmlHTTPRequest to fetch data from a continuous motion JPEG data stream involves an interesting trick where responseText can populate data even before the request is completed, since it will never actually finish. However, I have encountered some ...

When using Vue.js, the class binding feature may not function properly if it is referencing another data property that has variants

I am currently developing a basic TODO application. Within my index.html file, I have a main div with the id #app. Inside this div, there is another div with the class .todobox where I intend to display different tasks stored in my main.js file. Each task ...

What is the best way to transfer a variable from a Node.js Express server to an EJS HTML file in order to toggle alert visibility?

Hello, I am currently facing a challenge in sending a variable from my app.js file to my ejs HTML file in order to toggle the display of an alert. Here is what the relevant part of my app.js code looks like: view image description here Initially, I attem ...

Understanding how flex-wrap property works in flexbox is essential for creating

Take a look at the code snippet below: .flex-container { padding: 20px; margin: 20px; list-style: none; border: 1px solid silver; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz- ...

jQuery random generator for creating two-dimensional arrays

Why do all rows always have the same numbers? They should be populated with random numbers. Also, how can I fix this issue? I remember seeing a solution here before but now I can't seem to locate it. var mapSizex = 5; var mapSizey = 6; var mapArray ...

Using destructuring repeatedly for a single object property

At times, I engage in nested destructuring, where I go more than one level deep. It can be risky, but I always make sure the property exists to avoid encountering an error of undefined. Recently, I came across this scenario: const { match: { ...

Tips for storing the state using Localstorage?

Greetings to the person reading this message! I am relatively new to programming and I have a query... I created a Navigation bar: body > div > nav > div > ul > li*10 I have implemented the styling in CSS. //Navigation Bar const list = ...

`Creating a functional list.js filter``

I'm having trouble making the List.js filter function work properly. The documentation for List.js is not very helpful for someone new to development. Below is the code I am using: HTML: <div class="col-sm-12" id="lessons"> <input class= ...

What is the best way to restrict the length and number of lines in a textarea based on pixel dimensions?

I am looking to create a textarea where people can select different fonts, such as "sans-serif" and "serif", to type in text. I plan to have buttons labeled "sans-serif" and "serif" that will change the font of the textarea when clicked. However, there ar ...

Is your custom login form in Web2py not submitting properly?

My attempt to customize the login form for web2py has hit a roadblock. Despite adding the necessary fields and submit button, nothing seems to be happening. Here's what the code in the form's view looks like: {{include 'web2py_ajax.html&apo ...

How to access the ID value from the URL within a different component that was passed as a prop in

I have a scenario where I am building a reusable component with two child components in the following flow: Child Component 1 -> Parent Component -> Super Parent Main Component In the child component, I define a prop called 'url' which is ...

Which library does stackoverflow utilize to showcase errors (utilizing Bootstrap popover for error help-block)?

Currently, I am using bootstrap's has-error and help-block classes to display validation error messages in my form. However, I find the error message display in Stackoverflow's Ask Questions Form to be very appealing. Are they using a specific js ...

How can you trigger a 'hashchange' event regardless of whether the hash is the same or different?

Having a challenge with my event listener setup: window.addEventListener('hashchange', () => setTimeout(() => this.handleHashChange(), 0)); Within the handleHashChange function, I implemented logic for scrolling to an on-page element whil ...

execute a synchronous function within a promise

Recently diving into the world of JavaScript and asynchronous operations, I found myself working on a Node.js router with Express that pulls weather data from MongoDB using Mongoose. This data is collected from various sites at 15-minute intervals and proc ...

AngularJS animate issue: TypeError - method 'classNameFilter' not found

When I added ngAnimate to my AngularJS app.js file as documented, I encountered a peculiar error: Object [object Object] has no method 'classNameFilter' - angular-animate.js:297 Any idea why this is happening? This is the code snippet where I ...

Create a custom style for Vue2-Google-Maps autocomplete feature that mirrors the sleek design of Vuetify

Is there a simple way to style the gmap-autocomplete field to resemble a vuetify v-text-field? I've tried using the Vuetify-google-autocomplete module, but it's causing more errors than expected. What is the most straightforward method to make & ...

Retrieving the chosen option from a dropdown menu using AngularJS

<tr (click)="onRowClick(myDropDownList.value)"> <td> <select #myDropDownList (click)="$event.stopPropagation()" (change)="onChange($event.target.value)"> <option *ngFor="let n of numbers" [value]="n">{{n}}</option> </se ...

Enhancing the session helper in Silex with additional values

Hey there, I'm currently working on a basic shopping cart using an MVC framework called Silex. However, I've run into a JavaScript/AJAX issue that I could use some help with. My problem arises when trying to add a product to the basket. The issue ...

What is the best way to prioritize the display of custom login buttons based on the last button used for login?

I have implemented 4 different login methods for my app, each with its own associated component. I am looking to rearrange the buttons based on the last used login method. I already have a function to determine the last login method. let lastSignedInMetho ...

Material-UI: Creating Radio Button Groups

I have been working on a project using React and Bootstrap. I decided to switch to material-ui, which went smoothly except for the radio buttons. Below is the original code that worked well: <label> <input type={that.props.questionType} name ...