当我使用子路由时，我遇到了vue3路由器的问题。子路由显示在主页上的一个组件中，这个InfoLayer.vue组件只有在某些时候才可见，这取决于商店中的标志。
大致的路由器：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import IntroView from '../gameviews/IntroView.vue'
import PuzzleView from '../gameviews/PuzzleView.vue'

var routes = [

   {
     path: "/homepage",
     name: "homepage",
     component: HomeView,
     children: [
                 {
                   path: '/homepage/intro',
                   name: "intro",
                   component: IntroView
                 },
                 {
                   path: '/homepage/puzzle',
                   name: "puzzle",
                   component: PuzzleView
                 }
 
     ]
   }, ...

字符串
当然，项目中还有更多的路由，它们都工作得很好。只有子路由不工作，总是显示主页视图，而不是介绍或谜题。没有错误消息，即使显示错误的视图也能工作。
layer.vue组件中的部分看起来像这样：

<router-view v-slot="{ Component }">
                 <transition name="slidefade" appear mode="out-in" >
                     <component :is="Component" class="animated" :key="route.path" />
                 </transition>
               </router-view>

型
即使是加载IntroLayer组件时的额外推送，也始终会加载主页

onMounted(() => {

       setTimeout(() => {
         router.push( {path:"/homepage/puzzle"} );
       }, 2000);

型
为什么不给孩子看