vue3 不同级路由跳转能成功，但页面未刷新

具体问题：在实现一级路由跳转到二级路由时，会出现地址栏正确变动，但实际页面停留在菜单列表页并未改变的情况。

原问题代码

 {
        path:'/',
        name:"Index",
        component:()=>import('@/views/index.vue'), //不同级别路由跳转需要使用resolveComponent处理，才会更新页面
        meta:{title:"主页"},
        children:[
            {
                path:'/user/a',
                name:"UserA",
                component:()=>import('@/views/user/user_a.vue'),
                meta:{title:"用户管理 > 用户A"},
            },
            {
                path:'/user/b',
                name:"UserB",
                component:()=>import('@/views/user/user_b.vue'),
                meta:{title:"用户管理 > 用户B"},
            }
        ]
 }

解决方案

原因分析：发现是一级路由和二级路由共用了router-view导致的。

import {h,resolveComponent } from 'vue'

export default [
    //首页
    {
        path:'/',
        name:"Index",
        // component:()=>import('@/views/index.vue'), //不同级别路由跳转需要使用resolveComponent处理，才会更新页面
        component: { render: () => h(resolveComponent("router-view")) },
        meta:{title:"主页"},
        children:[
            {
                path:'/user/a',
                name:"UserA",
                component:()=>import('@/views/user/user_a.vue'),
                meta:{title:"用户管理 > 用户A"},
            },
            {
                path:'/user/b',
                name:"UserB",
                component:()=>import('@/views/user/user_b.vue'),
                meta:{title:"用户管理 > 用户B"},
            }
        ]
    }
]

以上即可解决！