自动化路由

自动化路由

通过动态引入js来实现自动化路由

require.context(’.’, true, /.js$/)
使用webpack的一个方法，require.context
第一个参数是需要检索的文件夹
第二个参数是是否遍历其中的子文件夹
第三个是正则

对于路由来说，路由其实就是一个数组，只要是组成数组格式放入vue实例，应该就可以了吧

所以思路来说，就是每个路由模块抛出一个对象，然后require引入，最后添加到vue实例

代码示例：
目录结构如下

text1：

const tt = [
	{
      path: '/pages/home/t1',
      name: 'index',
        meta: {`在这里插入代码片`
	        title: 't1',
	    },
    },
    {
	    path: '/pages/home/t2',
        name: 'list',
        meta: {
	        title: 't2',
	    },
	},
]
export default tt

index：

const files = require.context('.', true, /\.js$/)
const modules = []
console.log(files)
files.keys().forEach(key => {
  if (key === './index.js') return
  const item = files(key).default
  console.log(item)
  modules.push(...item)
  
})
console.log("所有的路由",modules)
export default modules

main：

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'Vuex'
import roterlist from './router'
Vue.config.productionTip = false
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
new Vue({
  render: h => h(App),
  store,
  router:roterlist,
}).$mount('#app')