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

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")

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

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

children 子页面路径前面不能加斜杠 '/'

路由children是跳转嵌套路由的

• 这篇博客: vue-router实现页面状态与url同步中的 代码实现 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• export default {
    data () {
      return {
        state: this.$route.query.state || '',
        refresh: false
      }
    },
    watch: {
      state (val) {
        const query = { ...this.$route.query, state: val };
        // 如果为空则删除属性，避免出现在url上
        !val && delete query.state;
        this.$router.push({ query });
      },
      '$route.query': {
        handler (query) {
          const { state } = query;
          state && (this.state = state);
          // 状态改变，刷新数据
          this.refresh = true;
        },
        deep: true
      }
    }
  }