fix(vue): improve compatibility with route guards (#22371)

resolves #22344

packages/vue/test-app/src/guards/Delay.ts

@@ -0,0 +1,18 @@
+import { loadingController } from '@ionic/vue';
+import {
+  NavigationGuardNext,
+  RouteLocationNormalized
+} from 'vue-router';
+
+export const DelayGuard = async (_: RouteLocationNormalized, _x: RouteLocationNormalized, next: NavigationGuardNext) => {
+  const loading = await loadingController.create({
+    message: 'Waiting 500ms...',
+    duration: 500
+  });
+
+  await loading.present();
+
+  await loading.onDidDismiss();
+
+  next({ path: '/routing' });
+}

packages/vue/test-app/src/router/index.ts

@@ -1,12 +1,18 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '../views/Home.vue'
+import Home from '@/views/Home.vue'
+import { DelayGuard } from '@/guards/Delay';
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     component: Home
   },
+  {
+    path: '/delayed-redirect',
+    beforeEnter: DelayGuard,
+    component: Home
+  },
   {
     path: '/lifecycle',
     component: () => import('@/views/Lifecycle.vue')
@@ -89,6 +95,9 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'tab3',
+        beforeEnter: (to, from, next) => {
+          next({ path: '/tabs/tab1' });
+        },
         component: () => import('@/views/Tab3.vue')
       }
     ]
@@ -120,6 +129,6 @@ const routes: Array<RouteRecordRaw> = [
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes
-})
+});
 
 export default router

packages/vue/test-app/src/views/Home.vue

@@ -44,6 +44,9 @@
         <ion-item router-link="/lifecycle" id="lifecycle">
           <ion-label>Lifecycle</ion-label>
         </ion-item>
+        <ion-item router-link="/delayed-redirect" id="delayed-redirect">
+          <ion-label>Delayed Redirect</ion-label>
+        </ion-item>
       </ion-list>
 
     </ion-content>