vue路由动态注册

1,700 阅读1分钟
import Vue from 'vue'
import VueRouter from 'vue-router'

const requireComponent = require.context('../views', false, /\.vue$/)

let fileNames = []
// 动态注册路由
requireComponent.keys().forEach(fileName => {
fileNames.push(fileName.slice(2, -4))
})
// 首字母小写
function initialLowercase (str) {
return str.replace(str[0], str[0].toLowerCase())
}

Vue.use(VueRouter)
const routes = ((fileNames) => {
return fileNames.map(i => {
let si = initialLowercase(i)
let obj = {
path: '/' + si,
name: si,
component: () => import(`@/views/${i}.vue`)
}
return obj
})
})(fileNames)

routes.unshift({
path: '/',
name: 'home',
component: () => import(`@/views/Home.vue`)
})

const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })

export default router