vue router 多层级嵌套页面不跳转

Question

vue router 多层级嵌套页面不跳转
需求：面包屑和路由联动，需要展现出层级关系
为了拿到层级关系，把路由改成了嵌套模式，嵌套了好几层。运行发现跳转页面的时候，深层路由页面跳不过去，只有url刷新效果

路由代码：

{
    path: "/index",
    component: () => import("@/layout/index.vue"),
    meta: {
      title: "计算平台",
    },
    children: [
      {
        name: "MyResource",
        path: "/resource",
        component: () => import("@/pages/data-center/mine/resourceList"),
        meta: {
          title: "数据中心",
        },
        children:[
          {
            name: "resourceList",
            path: "/resource/list",
            component: () => import("@/pages/data-center/mine/resourceList"),
            meta: {
              title: "我的数据",
              hasChildren:true
            },
            children: [
              {
                name: "AddResource",
                path: "/resource/add",
                component: () => import("@/pages/data-center/mine/addResource"),
                meta: {
                  title: "添加资源",
                },
              },
            ]
          },
        }

跳转：

```javascript
this.$router.push("/resource/add")

在“我的数据”页面添加路由容器，可以顺利跳转，但是很多菜单，每个页面手动去添加的话，也不太好实现。有没有什么别的办法。
目前感觉应该是跟重定向啥的有关系，但是没啥头绪，不知道从何改起。大家有没有遇到过这种啊，有什么好的解决方法嘛

Answer 1

每个父级路由都必须有路由容器<router-view />子级路由才会展示的，你的路由结构设计的有问题
应该这样子设计