vue markdown 如何生成导航目录
时间: 2023-07-27 14:20:50 浏览: 56
Vue Markdown 可以通过使用插件来生成导航目录。一个常用的插件是 `markdown-it-table-of-contents`,它可以自动生成 Markdown 文档的目录。
步骤如下:
1. 安装插件
```
npm install markdown-it-table-of-contents --save-dev
```
2. 在 Vue 组件中引入插件
```javascript
import MarkdownIt from 'markdown-it'
import markdownItToc from 'markdown-it-table-of-contents'
export default {
data () {
return {
md: new MarkdownIt()
}
},
mounted () {
// 注册插件
this.md.use(markdownItToc)
}
}
```
3. 在模板中使用插件生成目录
```html
<template>
<div>
<div v-html="md.render(markdownContent)"></div>
<div v-html="$refs.toc.innerHTML"></div>
</div>
</template>
```
4. 在 Markdown 文档中使用特殊的语法标记目录位置
```markdown
<!-- 目录开始 -->
<!-- TOC -->
<!-- 目录结束 -->
```
这样,当渲染 Markdown 文档时,插件会根据标记生成目录,并将其放置在 `div` 元素中,该元素通过 `$refs` 引用可以在模板中使用。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)