Ionic 6 Vue Route Does not work

Ionic Framework Ionic Vue
1

I create a route in index.ts. I expect the page will show login page content while the URL is http://localhost:8100/login,
but the page shows default page which is set in App.vue forever.

login-page.vue

<template>
    <ion-page>
        <ion-content class="ion-padding">
        <h1>Welcome</h1>
        
        
        </ion-content>
    </ion-page>
  </template>
  
  <script lang="ts">
    import { IonPage, IonContent, IonNavLink, IonButton, IonInput, IonRow, IonCol, IonImg, IonCard, IonCardTitle, IonCardContent, IonNote, IonGrid } from '@ionic/vue';
    import App from '@/views/dashboard-page.vue';
    import { defineComponent} from 'vue';
    import { useRouter } from 'vue-router';

    // import localStorage from '@/plugin/local-storage.vue';

    // var passcode = "s";
    export default defineComponent ({
      components: { IonPage, IonContent},
      name: "LoginPage",
        
      setup() {
        const router = useRouter();
        return { router };
      }, 
      data() {
        return {
          passcode: "abc",
          component: App
        };
      },
      methods: {
        gotoDashboard() {
            this.router.push('/dashboard/h');
        },
        clickKeypad(num: string) {
            // alert(num);
            // alert(this.passcode);
            if (num != 'c') {
                this.passcode += num;
            } else {
                this.passcode = "";
            }
        }
      }
    });
  </script>

  <style scoped>
    .card-wrapper {
        flex-wrap: wrap;
        display:flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    
    ion-card-header {
        display: flex;
        flex-flow: column-reverse;
    }
    ion-card {
        flex: 1 1 26%;
    }
  </style>

index.ts

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '',
    redirect: '/dashboard'
  },
  {
    path: '/login',
    name: 'LoginPage',
    component: () => import ('../views/dashboard-page.vue')
  },
  {
    path: '/dashboard/:id',
    name: 'DashboardPage',
    component: () => import ('../views/dashboard-page.vue')
  },
]

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

export default router

App.vue

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '',
    redirect: '/dashboard'
  },
  {
    path: '/login',
    name: 'LoginPage',
    component: () => import ('../views/dashboard-page.vue')
  },
  {
    path: '/dashboard/:id',
    name: 'DashboardPage',
    component: () => import ('../views/dashboard-page.vue')
  },
]

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

export default router

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';

import { IonicVue } from '@ionic/vue';

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';

/* Theme variables */
import './theme/variables.css';

const app = createApp(App)
  .use(IonicVue)
  .use(router)
  ;
  
router.isReady().then(() => {
  app.mount('#app');
});
1 Like