vue markdown 如何生成导航目录

你可以使用 `markdown-it` 和 `markdown-it-toc-done-right` 插件来生成导航目录。

首先，在 Vue 项目中安装这两个插件：

npm install markdown-it markdown-it-toc-done-right --save

然后在需要生成导航目录的组件中引入插件并配置：

import MarkdownIt from 'markdown-it'
import MdToc from 'markdown-it-toc-done-right'

export default {
  data() {
    return {
      markdown: '# Hello\n\n## Subheading\n\n### Subsubheading\n\n## Another subheading'
    }
  },
  computed: {
    toc() {
      const md = new MarkdownIt()
      md.use(MdToc, {
        level: [2, 3],
        containerClass: 'toc'
      })
      return md.render(this.markdown).toc
    }
  }
}

在模板中使用 `v-html` 渲染 Markdown，并使用 `v-html` 渲染生成的导航目录：

<template>
  <div>
    <div v-html="toc"></div>
    <div v-html="$options.filters.markdown(markdown)"></div>
  </div>
</template>

最后，你还需要在 CSS 中定义 `.toc` 类的样式，用于设置导航目录的样式。

以上就是在 Vue 中生成 Markdown 导航目录的步骤。