使用vite自动生成vue路由

全新的路由组织方式

• 以往编写路由都需要手动编写router.js代码，其实很多代码是重复的
• 新的方案根据文件夹目录结构自动生成
• 文件夹下的 index.vue -> /

初始化项目

构建

npm init vue@latest

运行

npm run dev

项目结构

• 一个文件夹对应一个路由
• page.js用来填写配置信息

export default {
    title: ''
}

Glob导入

• Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块
• 匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk

获取路由相关配置

const pages = import.meta.glob('../views/**/page.js', {
  eager: true,
  import: 'default'
})
const pageComps = import.meta.glob('../views/**/index.vue')

• page

{
    "../views/page.js": {
        "title": "主页"
    },
    "../views/pageOne/page.js": {
        "title": "页面一"
    },
    "../views/pageTwo/page.js": {
        "title": "页面二"
    }
}

• pageComps

生成路由

const routes = Object.entries(pages).map(([path,meta]) => {
  const pathJSPath = path
  path = path.replace('../views','').replace('/page.js','') || '/'
  const name = path.split('/').filter(Boolean).join('-') || 'index'
  const comPath = pathJSPath.replace('page.js','index.vue')
  return {
    path,
    name,
    component: pageComps[comPath],
    meta
  }
})

总结

通过以上代码已经实现路由自动生成，但该方式不能生成嵌套路由

嵌套路由实现

修改page.js

export default {
  // 标题
  title: '',
  // 路由层级
  index: 0,
  // 是否存在子路由
  isChild: true,
  // 父级路由的path
  parent: ''
}

创建生成路由对象方法

const initObj = (path, meta) => {
  const pathJSPath = path
  path = path.replace('../views', '').replace('/page.js', '') || '/'
  const name = path.split('/').filter(Boolean).join('-') || 'index'
  const comPath = pathJSPath.replace('page.js', 'index.vue')
  const value = {
      path,
      name,
      component: pageComps[comPath],
      meta
  }
  if(meta.isChild) {
    value.children = []
  }
  return value
}

对pages进行排序

// 创建map对象
const sortPages = new Map()
// 根据index排序
const sortKey = Object.keys(pages).sort((a, b) => pages[a].index - pages[b].index)
// 添加到map
sortKey.forEach(key => {
  sortPages.set(key, pages[key])
})

遍历

const routes = []
for(let [path, meta] of sortPages.entries()) {
  // 第一层路由直接添加
  if(meta.index == 0) {
    routes.push(initObj(path,meta))
  }
  // 第二层路由先获取上级节点
  if(meta.index == 1) {
    const parentIndex = routes.findIndex(item => item.path == meta.parent)
    if(parentIndex != -1) {
      routes[parentIndex].children.push(initObj(path,meta))
    }
  }
  // 根据meta.parent获取父节点信息，重复第二层的操作
  if(meta.index == 2) {
    const page = pages[`../views${meta.parent}/page.js`]
    const oneParentIndex = routes.findIndex(item => item.path == page.parent)
    const twoParentIndex = routes[oneParentIndex].children.findIndex(item => item.path == meta.parent)
    if(twoParentIndex != -1) {
      routes[oneParentIndex].children[twoParentIndex].children.push(initObj(path,meta))
    }
  }
}

文件结构

生成效果