generateRoute.js 1.47 KB
/*
 * @Date: 2022-05-16 17:21:45
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-06-29 16:00:23
 * @FilePath: /tswj/src/utils/generateRoute.js
 * @Description: 文件描述
 */
import asyncRoutes from "../mock/routes"

/**
 * 根据后台返回的路径,生成页面的组件模版
 * @param {*} component 
 * @returns 模版地址
 */
function loadView(component) {
  return () => import(`../views/${component}.vue`)
}

const formatRoutesArr = []

/**
 * 生成路由结构
 * @param {*} routes 动态获取数据
 * @description 动态路由没有嵌套结构,children被拉平,都是平级的结构
 */
const formatRoutes = (routes) => {
  routes.forEach(route => {
    const router = {}
    const {
      path,
      redirect,
      name,
      component,
      keepAlive,
      meta,
      children
    } = route

    router.path = path
    redirect && (router.redirect = redirect)
    name && (router.name = name)
    router.component = loadView(component)
    keepAlive && (router.keepAlive = keepAlive)
    meta && (router.meta = meta)
    router.children = !Array.isArray(children) || formatRoutes(children);

    formatRoutesArr.push(router)
  })
}

formatRoutes(asyncRoutes)

/**
 * 生成动态路由
 * @param {*} to 
 * @returns 符合路径条件的动态路由结构
 */
export const generateRoute = (to) => {
  let router = ''
  formatRoutesArr.forEach(item => {
    if (item.path === to.path) {
      router = item
    }
  })
  return { ...to, ...router }
}