怎样给一个Vue页面添加大纲导航

一、前言

前两天项目遇到一个需要给页面添加大纲导航的功能，要求把页面中的特定标签加入到大纲导航中。类似这样：

需求本身并不难，不过想把这个东西做得通用一些，也就是以后再有别的页面需要加导航，不用再重新写很复杂的逻辑了。下面说一下具体实现思路，并且文末会给出简便易用的导航生成工具。

二、实现思路

1、需求分析

做之前想到之前接触过的markdown编辑器mavon-editor有一个导航，不过那个导航只能用于编辑器自身，我去看了一下它的表现：

clipboard.png

点击右边的导航节点，会自动定位到对应标题元素。当时思考了一下它是怎么记录标题元素的，会不会是给标题元素加了一个什么id之类的属性？于是我看了一下生成的DOM：

竟然是给标题元素加了一个带有id属性的a标签的子节点。不过它生成id的方式比较简单，单纯的"字符串_编号"而已，想来并不是那么可靠（难于保证编辑器外有相同id的元素）。

我大体有了一个基本的思路：

• 既然是对于任意页面都可用，那可以遍历DOM树，寻找需要导航的标签，然后把相关节点位置信息存储起来。这里也可一类似mavon-editor给dom树中插入一个元素作为一个锚点。遍历DOM树的方法应该与DOM渲染后从上到下的顺序一致，即采用深度优先的先序遍历方法（先序遍历即先检查根元素，再检查子元素；后序遍历则相反；如果是二叉树，还有中序遍历）。
• 在所有页面中，并不能单纯根据h1,h2等标签名来判别一个元素是否要导航，所以想到了用选择器来确定，同时添加根据选择器来排除一些例外的元素。
• 最终的导航应该是一个树形结构，并且每一个节点对应一个插入的锚点，即每一个树节点应该包含一个锚点信息。

2.实现思路

因为项目是采用Vue来实现，数据控制视图，所以通常不需要直接操作DOM。但是这里需要在DOM中插入锚点，Vue自定义指令是一个不错的选择。于是可以写一个指令，通过需求分析，大体确定可以这个指令值可以绑定的一个包含以下三个信息的对象：

• 一个列表selectors：列表中的每一项是一层导航对应的选择器，比如下标为0的元素是第一级导航，通常可以用选择器’h1’，下标为1的元素是第二级导航，通