vue2 前端如何实现Markdown文档的导读功能，当用户点击导读列表中的某个标题时，页面将自动滚动到对应的标题处。

在 Vue2 前端中实现 Markdown 文档的导读功能，可以使用如下步骤：

1. 使用 `markdown-it` 库将 Markdown 文档渲染成 HTML，同时提取出标题列表。

2. 将提取的标题列表渲染成导读列表，每个标题对应一个锚点。

3. 使用 `vue-router` 库绑定锚点与路由，使得点击导读列表中的某个标题时，页面将自动滚动到对应的标题处。

具体实现步骤如下：

1. 安装 `markdown-it` 库。

npm install markdown-it --save

2. 在 Vue 组件中使用 `markdown-it` 渲染 Markdown 文档，并提取出标题列表。

<template>
  <div>
    <div v-html="html"></div>
    <ul>
      <li v-for="title in titles">
        <router-link :to="{hash: title.anchor}">{{title.text}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it'

export default {
  data() {
    return {
      md: new MarkdownIt(),
      html: '',
      titles: []
    }
  },
  mounted() {
    const md = this.md
    const markdown = '# Title 1\n\n## Title 2\n\n### Title 3'
    const tokens = md.parse(markdown, {})
    let currentLevel = 0
    let currentParent = null
    this.titles = tokens
      .filter(token => token.type.startsWith('heading'))
      .map(token => {
        const level = Number(token.tag.substr(1))
        const text = token.children[0].content
        const anchor = text.toLowerCase().replace(/[^a-z0-9]+/g, '-')
        if (level > currentLevel) {
          currentParent = currentParent || this.titles[this.titles.length - 1]
        } else if (level < currentLevel) {
          currentParent = currentParent.parent
        }
        const title = { level, text, anchor, parent: currentParent, children: [] }
        currentParent.children.push(title)
        currentLevel = level
        return title
      })
    this.html = md.render(markdown)
  }
}
</script>

3. 在路由中使用 `vue-router` 绑定锚点与路由。

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/document',
      component: Document,
      children: [
        {
          path: '',
          redirect: { hash: 'title-1' }
        },
        {
          path: '',
          component: DocumentContent,
          props: route => ({ hash: route.hash }),
          beforeEnter: (to, from, next) => {
            const el = document.getElementById(to.hash.slice(1))
            if (el) {
              el.scrollIntoView()
              next()
            } else {
              next(false)
            }
          }
        }
      ]
    }
  ]
})

在上述代码中，我们通过 `props` 属性将 URL 中的锚点传递给 `DocumentContent` 组件，然后在 `beforeEnter` 函数中找到对应的锚点元素，调用 `scrollIntoView` 方法将页面滚动到该元素处。如果找不到对应的锚点元素，则不进行路由跳转。