vue markdown-it 左边文档内容右边基于标题导航，点击标题导航跳转到对应的文档内容

实现这个功能可以分为两个步骤：

1. 使用markdown-it解析Markdown文本，并将解析后的HTML嵌入到Vue组件中显示文档内容。

<template>
  <div class="markdown-it-container">
    <div class="markdown-it-content" v-html="html"></div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it'

export default {
  data () {
    return {
      text: '## 标题2\n\n这是文档内容'
    }
  },
  computed: {
    html () {
      const md = new MarkdownIt()
      return md.render(this.text)
    }
  }
}
</script>

2. 根据文档内容生成基于标题的导航，并实现点击标题导航跳转到对应的文档内容。

<template>
  <div class="markdown-it-container">
    <div class="markdown-it-nav">
      <ul>
        <li v-for="(item, index) in toc" :key="index">
          <a :href="`#heading-${index}`">{{ item.text }}</a>
        </li>
      </ul>
    </div>
    <div class="markdown-it-content" v-html="html"></div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it'

export default {
  data () {
    return {
      text: '## 标题2\n\n这是文档内容'
    }
  },
  computed: {
    html () {
      const md = new MarkdownIt()
      const toc = []
      const result = md.render(this.text, {
        // 添加anchor插件，用于生成标题锚点
        plugins: [
          require('markdown-it-anchor')
        ],
        // 生成目录
        toc: true,
        tocCallback: (tocMarkdown, tocArray, tocHtml) => {
          toc.splice(0, toc.length)
          toc.push(...tocArray)
        }
      })
      // 将目录保存到data中
      this.toc = toc
      return result
    }
  }
}
</script>

<style scoped>
.markdown-it-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 20%;
  max-height: 100vh;
  overflow-y: auto;
  border-left: 1px solid #ccc;
  padding: 20px;
}
.markdown-it-content h2,
.markdown-it-content h3,
.markdown-it-content h4,
.markdown-it-content h5,
.markdown-it-content h6 {
  margin-top: 80px;
}
</style>

在上面的代码中，我们使用了`markdown-it-anchor`插件来生成标题锚点，并通过`toc`选项生成目录，然后将目录保存到data中。在导航中，我们遍历目录生成导航列表，并将每个标题的锚点设置为对应的跳转链接，然后在文档内容中给每个标题添加唯一的id，用于实现跳转。同时，在样式中为导航和文档内容设置样式，使其呈现出左右两栏的效果。