vue2 markdown 如何生成导航目录 当用户点击目录中标题 页面就滚到标题对应位置

在 Vue2 中生成 Markdown 目录并实现点击跳转可以使用 `markdown-navbar` 插件。

步骤如下：

1. 安装插件

npm install markdown-navbar --save-dev

2. 在 Vue 组件中引入插件

import MarkdownIt from 'markdown-it'
import MarkdownNavbar from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'

export default {
  data () {
    return {
      md: new MarkdownIt(),
      navbarHtml: ''
    }
  },
  mounted () {
    this.md.renderer.rules.heading_open = (tokens, idx, options, env, self) => {
      const token = tokens[idx]
      const level = Number(token.tag.substr(1))
      if (level >= 2 && level <= 4) {
        const title = self.renderInlineAsText(token.children)
        const slug = title.trim().toLowerCase().replace(/\s+/g, '-')
        return `<h${level} id="${slug}"><a name="${slug}" class="anchor" href="#${slug}"></a>${title}</h${level}>`
      } else {
        return self.renderToken(tokens, idx, options)
      }
    }

    this.navbarHtml = MarkdownNavbar({
      source: this.markdownContent,
      // 目录生成的最小标题级别
      level: 2,
      // 是否在目录中显示标题的序号
      showLevel: false,
      // 是否在目录中显示标题的序号
      isChild: false,
      // 是否在标题中显示锚点链接
      // 默认为 true，设置为 false 可以避免与其它锚点冲突
      // 如果设置为 false，需要在标题中添加 <a name="your-anchor"></a> 锚点
      // 或者在渲染规则中处理
      hasAnchor: true,
      // 是否使用锚点链接
      // 如果设置为 false，则点击标题不会跳转
      // 默认为 true
      hasLink: true,
      // 是否在目录中显示标题的图标
      // 默认为 false，设置为 true 可以增加用户体验
      showIcon: false,
      // 是否在目录中显示标题的缩进
      // 默认为 true，设置为 false 可以减少目录占用的空间
      indent: true,
      // 是否在目录中显示标题的序号
      // 默认为 false，设置为 true 可以提供更好的阅读体验
      ordered: false
    })
  }
}

3. 在模板中渲染 Markdown 和目录

<template>
  <div>
    <div v-html="md.render(markdownContent)" @click="handleClick"></div>
    <div v-html="navbarHtml"></div>
  </div>
</template>

4. 实现点击跳转

methods: {
  handleClick (event) {
    if (event.target.nodeName === 'A') {
      event.preventDefault()
      const hash = event.target.hash
      const target = document.querySelector(hash)
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth'
        })
      }
    }
  }
}

这样，当用户点击目录中的标题时，就会滚动到对应位置。需要注意的是，由于滚动事件会触发多次，为了避免多次触发滚动，需要在点击事件中添加 `event.preventDefault()` 阻止默认行为。