vue.js - How are cascading router-view elements handled? - Stack Overflow

TL;DR: how are the priorities of Vue routes (global vs child) calculated?

Quasar is a Vue framework that can bootstrap applications. I am trying to follow its suggested structure but I am not sure how Vue routing works with cascading router-view elements.

In a bootstrapped application, the routes are defined as

import type { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
];

export default routes;

Let's assume that we are at /.

The first component that starts everything else (App.vue) is

<template>
  <router-view />
</template>

<script setup lang="ts">
//
</script>

So when I am at /, the MainLayout component is lazy loaded. This is it, I removed all other components (sidebar etc.) to just keep the part that is relevant to this question:

<template>
  <q-layout view="lHh Lpr lFf">

<!-- header, sidebar ->

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

So we have again <router-view />. What is it supposed to display?

I know the answer is IndexPage.vue and I am guessing that this is because it is a child, with a '' path. Which other path entries are possible for children?

If this is, say, admin, how does <router-view /> know that it is this component that should be mounted, and not the one from this slightly expanded routes?

import type { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') },
      { path: 'admin', component: () => import('pages/AdminPage.vue') },
    ],
  },
  {
    path: '/admin',
    component: () => import('layouts/AnotherAdminPage.vue'),
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/ErrorNotFound.vue'),
  },
]

export default routes;

Which of AnotherAdminPage or AdminPage will be mounted and why?

In other words: what is the precedence when choosing routes?