Dynamic switch layouts

[Ben2022-cell]

Hello,
I require according to the roles, toggle different layout. For this is my code, now default render is OK; admin render is go to other page, but i require render in the admin layout. This is my code:

catalog layouts:

src\layouts

admin.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="A">item A</el-menu-item>
          <el-menu-item index="B">item B</el-menu-item>
          <el-menu-item index="/">Back Home</el-menu-item>
        </el-menu>
      </el-header>
      <el-main> <router-view /></el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  const activeIndex = ref("A");
  const router = useRouter();
  const handleSelect = (key: string, keyPath: string[]) => {
    // console.log(router.meta);
    // console.log(key, keyPath);
    if (key === "/") {
      router.push("/");
      return;
    }
    router.push(`/admin/${key}`);
    // router.push(key);
  };
</script>

default.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="admin">Goto admin</el-menu-item>
          <el-menu-item index="defaultA">Default A</el-menu-item>
          <el-menu-item index="defaultB">Default B</el-menu-item>
          <el-menu-item index="About">About</el-menu-item>
        </el-menu>
      </el-header>
      <el-main> <router-view name="default" /></el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from "vue";
  import { useRouter, useRoute } from "vue-router";
  const activeIndex = ref("A");
  const router = useRouter();
  const handleSelect = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath, router);
    // router.push(`/admin/${key}`);
    console.log("default handleSelect");
    router.push(key);
  };

  onMounted(() => {
    console.log("default.vue");
    router.push("/about");
  });
</script>

src\pages\admin

index.vue

<template>
  <div>
    <h2>This is a page with admin layout!</h2>
    <B />
  </div>

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

<script setup lang="ts">
  import B from "./B.vue";
</script>

<route lang="yaml">
meta:
  layout: admin
</route>

src\pages

index.vue

<template></template>
<route lang="yaml">
meta:
  layout: default
</route>

src\router\index.ts

import { createRouter, createWebHistory } from "vue-router";
import { setupLayouts } from "virtual:generated-layouts";
import { routes } from "vue-router/auto-routes";

const router = createRouter({
  history: createWebHistory(),
  routes: setupLayouts([
    ...routes,
  ]),
});

export default router;