vue3 动态路由+嵌套列表

工作中遇到一个需求：一个图片接口返回嵌套数据，层数不定，节点子元素不定，数据结构类似如下：

{
    "code": 1,
    "msg": "success",
    "data": [
        {
            "name": "种类名称1",
            "urls": [
               //...
            ],
            "items": [],
            "desc": null
        },
        {
            "name": "种类名称2",
            "urls": null,
            "items": [
                {
                    "name": "种类名称2-1",
                    "urls": [
                        //...
                    ],
                    "items": null,
                    "desc": null
                },
                {
                    "name": "种类名称2-2",
                    "urls": [
                         //...
                    ],
                    "items": null,
                    "desc": null
                },
                {
                    "name": "种类名称2-3",
                    "urls": [
                        //...
                    ],
                    "items": null,
                    "desc": null
                }
            ],
            "desc": null
        },
        {
            "name": "种类名称3",
            "urls": null,
            "items": [
                {
                    "name": "种类名称3-1",
                    "urls": [
                         //...
                    ],
                    "items": null,
                    "desc": null
                }
            ],
            "desc": null
        }
        //...
    ]
}

解决步骤：

1. 是动态路由判断是列表页面还是图片展示页面，声明路由如下：

  {
    path: "/pictures/:title/:obj",
    name: "pictures",
    component: _import_("homearchive/Pictures"),
    meta: {
      keepAlive: true,
    },
    desc: "图片列表",
  },
  {
    path: "/pictureItems/:title/:obj",
    name: "pictureItems",
    component: _import_("homearchive/PictureItems"),
    meta: {
      keepAlive: true,
      title: "图片展示页面",
    }
  }
 

2。接口后去数据之后舒心列表，点击跳转时判断是 urls 和 items；如果urls有值不为空则跳转图片展示页面；否则跳转子列表；

  if (items.length > 0) {
    const titleCode = encodeURIComponent(e.name);
    const objCode = encodeURIComponent(JSON.stringify(e));

    router.push({
      path: `/pictureItems/${titleCode}/${objCode}`,
      meta: {title: e.name}
    });
  } else {
    router.push({
      name: `/pictures/${titleCode}/${objCode}`,
      meta: {title: e.name}
    });
  }

3. 通过 useRouter 获取数据:

const router = useRouter();
//...
const  title = route.params.title;
const obj = JSON.parse(route.params.obj) 
//...

如此即可解决层层嵌套数据展示逻辑。