vue2 markdown文档导读功能怎么做

您可以使用Vue.js和markdown-it库来实现Markdown文档的导读功能。具体步骤如下：

1. 首先安装必要的依赖：`vue`、`vue-markdown`和`markdown-it`。

npm install vue vue-markdown markdown-it --save

2. 在Vue.js组件中引入`vue-markdown`和`markdown-it`库。

<template>
  <div>
    <vue-markdown :source="markdown" />
    <ul>
      <li v-for="heading in headings">
        <a :href="`#${heading.id}`">{{ heading.text }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'
import MarkdownIt from 'markdown-it'

export default {
  components: {
    VueMarkdown
  },
  data () {
    return {
      markdown: '# Hello\n\n## World\n\n### This is a test\n\n#### H4\n\n##### H5\n\n###### H6'
    }
  },
  computed: {
    headings () {
      const parser = new MarkdownIt()
      const tokens = parser.parse(this.markdown, {})
      return tokens.filter(token => token.type === 'heading_open').map(token => {
        const text = tokens.find(t => t.type === 'inline' && t.children[0].content === token.children[0].content)
        return {
          id: token.attrs.find(attr => attr[0] === 'id')[1],
          text: text.children[0].content
        }
      })
    }
  }
}
</script>

3. 在Vue.js组件的`computed`选项中定义一个计算属性`headings`，这个属性将解析当前Markdown文本并返回一个包含所有标题的数组。每个标题都是一个对象，包含`id`和`text`属性。

4. 在Vue.js组件的模板中使用`v-for`指令循环遍历`headings`数组，并生成一个包含所有标题链接的无序列表。

这样，您就可以实现Markdown文档的导读功能了。当用户点击导读列表中的某个链接时，页面将自动滚动到对应的标题处。