记一次使用vue-markdown在vue中解析markdown格式文件，并自动生成目录大纲

先上效果图

如图所示，在网页中，能直接解析markdown文档，并且生成目录大纲，也支持点击目录标题跳转到对应栏目中，下面就来讲讲是如何实现此功能的。

1、下载vue-markdown

yarn add vue-markdown

2、在页面中渲染markdown文件

此时，打开浏览器查看，页面中已经正常渲染markdown文件了。

3、生成目录大纲

现在，我们需要有目录大纲方便我们查看文档。我的思路是，首先拿到markdown文件的html结构，然后找到所有H1-H5的标题标签，并给这些标签设置id，生成一个新数组，通过这个数组生成目录结构，说干就干。

//html部分


    



// js部分
catalogTree() {
    const content = document.getElementById("content").children;
    var arr = [];
    let currentHightestLevel;
    let parentId;
    let index = 0;
    for (let i = 0; i < content.length; i++) {
        let header = content[i].localName;
        if (/\b[h][0-9]\b/.test(header)) {
            let ele = $(content[i]);
            let name = ele.text();
            // 设置id
            ele.attr("id", i);
            let id = i;
            if (index === 0 || header <= currentHightestLevel) {
                currentHightestLevel = header;
                parentId = id;
            }
            arr.push({
                id: id,
                label: name,
                parentId: parentId == id ? "0" : parentId,
            });
            index++;
        }
    }
    const tree = [];
    arr.forEach((item) => {
        if (item.parentId === "0") {
            tree.push(this.convertArrayToTree(arr, item));
        }
    });
    this.tree = tree;
},
convertArrayToTree(arr, node) {
    for (let i = 0; i < arr.length; i++) {
        if (arr[i].parentId === node.id) {
            const res = this.convertArrayToTree(arr, arr[i]);
            if (node.children) {
                node.children.push(res);
            } else {
                node.children = [res];
            }
        }
    }
    return node;
},
handleNodeClick(data) {
    let anchorElement = document.getElementById(data.id);

    if (anchorElement) {
         anchorElement.scrollIntoView({
             behavior: "smooth",
             block: "end",
         });
     }
},

4、大功告成，最后，附上全部代码，带css样式