vue3 三级路由跳转成功但页面未刷新

具体问题

在实现二级路由跳转到三级路由（菜单列表 -> 新增菜单页）时，会出现地址栏正确变动，但实际页面停留在菜单列表页并未改变的情况。
原本的router/index配置如下：

{
    path: '/',  // 一级路由
    name: 'mainpage',
    component: AppLayout,
    meta: {
      title: '首页',
      requiresAuth: true 
    },
    children: [
      {
        path: '/menus',   	// 二级路由
        name: 'menus',
        component: () => import('@/views/menu/MenuIndex.vue'),
        meta: { title: '菜单列表' },
        children: [		// 三级路由
          {
            path: '/menus/create',
            name: 'menuCreate',
            component: () => import('@/views/menu/CreateOrEdit.vue'),
            meta: { title: '新建菜单' },
          },
        ]
      },
    ]

解决方案

在网上一番搜索后，发现是二级路由和三级路由共用了router-view导致的。（排查时可以试着在二级路由的组件里加上看看三级路由的组件会不会正常显示，如果可以的话大概率也是这个问题）
参考之后解决方案是：

import { h, resolveComponent } from "vue";

{
        path: '/menus',
        name: 'menus',
        // render + redirect 解决
        component: { render: () => h(resolveComponent("router-view")) }, 
        redirect: '/menus',
        // component: () => import('@/views/menu/MenuIndex.vue'),
        meta: { title: '菜单列表' },
        children: [
          {
            path: '/menus',
            name: 'menus',
            component: () => import('@/views/menu/MenuIndex.vue'),
            meta: { title: '菜单列表' },
          },
          {
            path: '/menus/create',
            name: 'menuCreate',
            component: () => import('@/views/menu/CreateOrEdit.vue'),
            meta: { title: '新建菜单' },
          },
        ]
      },

需要注意的是 render h 在vue2和vue3里的用法不一样。
vue2中是：

 render: (h) => h("router-view")

vue3中是：

import { h, resolveComponent } from "vue";
render: () => h(resolveComponent("router-view"))