vue路由封装 - 自动生成路由

const routes = [
  {
    path: '/',
    name: 'layout',
    redirect: { name: 'index' },
    component: 'layout',
    children: [
      {
        component: 'index'
      }
    ]
  },
  {
    component: 'login'
  },
  {
    path: '*',
    redirect: { name: 'index' }
  }
]

// 获取路由信息的方法
const getRouters = function () {
  createRoute(routes)
  return routes
}
// 自动生成路由
function createRoute (arr) {
  for (let i = 0; i < arr.length; i++) {
    if (!arr[i].component) return

    // 去除index
    const val = delIndex(arr[i].component)
    // 生成name,如果用户设置了就不用自动生成
    arr[i].name = arr[i].name || val.replace(/\//g, '_')
    // 生成path，如果用户设置了就不用自动生成，而是使用用户设置的
    arr[i].path = arr[i].path || `/${val}`
    // 自动生成component
    arr[i].component = require(`../../views/${arr[i].component}.vue`).default
    if (arr[i].children && arr[i].children.length > 0) {
      createRoute(arr[i].children)
    }
  }
}

// 去除最后的index
function delIndex (str) {
  // 获取最后一个/后面的值
  const index = str.lastIndexOf('/')
  // 获取最后一个/后面的值
  const val = str.substring(index + 1, str.length)
  // 判断是不是index结尾
  if (val === 'index') {
    return str.substring(index, -1)
  }
  return str
}
export default getRouters()