Nested Routes and ion-router-outlet

I am currently developing with Vue 3 and Ionic 5.

And I am confused how I can use a second component or if my approach is completely wrong.

Project Setup:

I have a Split Pane in my App.vue where an is already present. Now I wanted to Route to another View where another one is present.

I guess code shows more than a thousand words:

In my router.js I’ve the following nested routes:

{
    path: '/reset/:id',
    name: 'reset', 
    component: () => import('../views/authentication/ResetPasswordRouterOutlet.vue'),
    children: [
      {
        path: 'email', 
        component: () => import('../views/authentication/ResetPassword.vue')
      },
      {
        path: 'token', 
        component: () => import('../views/authentication/ResetPasswordToken.vue')
      },
      {
        path: 'password', 
        component: () => import('../views/authentication/ResetPasswordForm.vue')
      }
    ]
  },

And in my ResetPasswordRouterOutlet.vue is nothing except the outlet:

<template>
  <div>
    <ion-router-outlet></ion-router-outlet>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
//import { useRoute } from 'vue-router';
import {
  IonRouterOutlet
} from '@ionic/vue'
export default defineComponent({
  components: {
    IonRouterOutlet
  }, 
  setup(){

  }
})
</script>

<style>

</style>

The question:
Why is the router outlet not working and why is the nested route not shown when I navigate to /reset/email.
(Btw. ResetPassword.vue is a ion-page with h1 inside to test if it works)

Thanks in Advance.

1 post - 1 participant

Read full topic