vuepress侧边栏生成指定目录的路由

递归实现,测试了一个四级目录没有问题.如果有误还望指出改正

需要node环境

  1. DIR为指定目录的上一级
  2. base为指定目录的名称
//获取指定目录下的所有文件名称
const fs = require("fs/promises")

const DIR = "C:\\Users\\13477\\Desktop\\test\\docs"
const base = "第1章 快速开始"

//将指定目录下的文件生成obj
async function getObj(dir){
    //获取指定目录下的所有文件
    let list = await fs.readdir(dir)
    //生成对应的obj
    let array1 = []//存放原始的配置对象
    for (let name of list) {
        array1.push({title:name,children:[]})
    }
    return array1
}
//
async function isDir(path){
    let result = await fs.stat(path)
    return result.isDirectory()
}

async function my(path,arrays){
    // console.log('外',path)
    //获取指定目录下的所有文件(对象形式)
    let array1 = await getObj(path)
    // console.log(array1)
    arrays.push(...array1)
    if (arrays.length>0){
        for (const array1Element of arrays) {
            const index = arrays.indexOf(array1Element);
            let path1 = path+"\\"+array1Element.title
            // console.log('内',path1)
            //判断是否是目录
            if (await isDir(path1)){
                //如果是目录
                await my(path1,arrays[index].children)
            }else{
                //不是目录,通过路径解析出所需 路由
                array1Element.children.push(path1.slice(path1.indexOf(base)-1).replaceAll("\\",'/'))
            }
        }
    }



}


(async ()=>{
    let path = DIR+"\\"+base
    let arrays = []
    await my(path,arrays)
    console.log(JSON.stringify(arrays)
        .replaceAll("\n",'')
        .replaceAll(".md",'')
    )

})()



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue ElementUI 的侧边路由是指在使用 ElementUI 框架时,通过配置路由信息来实现侧边的导航功能。具体实现方法可以参考 ElementUI 官方文档中的路由和侧边部分。在配置路由时,需要设置每个路由对应的组件、路径、名称等信息,并在侧边中显示对应的菜单项。这样用户就可以通过点击侧边菜单来切换页面,实现整个应用的导航功能。 ### 回答2: Vue是一种流行的JavaScript框架,可用于构建交互式的Web界面。Vue的一个重要的第三方库是Element UI,它提供了许多易于使用的界面组件和实用程序,可以在Vue应用程序中快速构建功能丰富的用户界面。Element UI中的一个重要组件是侧边,它是一个可折叠的垂直菜单,常用于Web应用程序中的导航。侧边通常由一组菜单链接或路由链接组成,这些链接指向对应的页面或功能。 在Vue应用程序中使用Element UI侧边,需要使用Vue Router,这是Vue中的一个官方路由库。Vue Router可用于将多个Vue组件映射到应用程序中的不同路由路径。为了在侧边中显示路由链接,需要在Vue Router中定义路由并将其映射到组件。这些路由定义包括一个路径和对应的组件,例如: ``` const routes = [ { path: '/home', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] ``` 这样,应用程序会在`/home`、`/about`和`/contact`路径上显示`Home`、`About`和`Contact`组件。接下来,可以使用Element UI中的`el-menu`和`el-menu-item`组件来显示路由链接和菜单项: ``` <template> <el-menu :default-active="active" mode="vertical"> <el-menu-item index="/home"> <router-link to="/home">Home</router-link> </el-menu-item> <el-menu-item index="/about"> <router-link to="/about">About</router-link> </el-menu-item> <el-menu-item index="/contact"> <router-link to="/contact">Contact</router-link> </el-menu-item> </el-menu> </template> ``` 这段代码会显示一个垂直菜单,其中包含三个菜单项,分别指向`/home`、`/about`和`/contact`路径。`router-link`指令会自动创建HTML链接,它会自动处理点击事件和路由导航。在这里,`index`属性指定了菜单项的标识符,用于在状态中保存当前选定的菜单项。可以使用Vue的状态管理库Vuex来管理菜单项的状态。 总之,使用Element UI侧边路由是Vue应用程序中常见的一种场景,可以通过Vue Router中的路由定义和Element UI中的菜单组件实现。这种方法不仅易于使用,而且具有良好的可扩展性和可维护性,适合于构建大型Web应用程序。 ### 回答3: Vue是一个流行的JavaScript框架,它提供了非常强大的组件和工具来构建现代Web应用程序。在Vue中,Element UI是最受欢迎的UI框架之一,它包含一套非常丰富和灵活的UI组件和工具,可以帮助我们快速构建高质量的Web应用程序。 其中一个非常重要的组件就是侧边路由。侧边路由是一种非常常见的UI设计模式,在Web应用程序中经常用于导航和内容导航。Vue中的Element UI框架提供了一套很好的侧边路由组件,可以大大简化我们的开发流程。 使用Element UI的侧边路由组件需要以下步骤: 1. 安装Element UI组件库,可以通过npm安装:npm install element-ui 2. 引入Element UI的侧边路由组件,通常可以在main.js文件中引用:import { Aside, Menu, Submenu, MenuItemGroup, MenuItem } from 'element-ui' 3. 使用Vue Router来设置路由路径和组件,可以创建一个routes.js文件来定义路由:import Home from '../views/Home.vue'; import About from '../views/About.vue'; const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ]; 4. 在App.vue模板中,添加侧边和菜单组件,并绑定路由信息: <template> <div id="app"> <el-aside width="200px"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-menu"></i>导航一 </template> <el-menu-item-group title="分组一"> <el-menu-item index="/home">主页</el-menu-item> <el-menu-item index="/about">关于</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <div id="content"> <router-view></router-view> </div> </div> </template> 在以上代码中,通过设置el-aside和el-menu组件,我们创建了一个简单的侧边和菜单,el-menu-item组件则用来绑定路由路径。 通过以上步骤,我们就可以快速创建一个带有侧边路由的Web应用程序。Element UI的侧边路由组件非常灵活和可定制化,可以支持多级菜单和子菜单,还可以设置一些基本的样式和动画。无论是对于开发者还是用户来说,Element UI的侧边路由都是非常实用和易于使用的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值