vue根據文件夾自動生成路由 匹配路徑

//routes.js
//遞歸獲取 views 文件夾下的所有.vue文件
const files = require.context('@/views', true, /\.vue$/)
let pages = {};
files.keys().forEach(key => {
  pages[key.replace(/(\.\/|\.vue)/g, '')] = files(key).default;
})
//生成路由規則
let generator = [];
Object.keys(pages).forEach(item => {
  generator.push({
    path: `/${pages[item].name.replace(/-/g, '/')}`,
    name: pages[item].name,
    component: pages[item]
  })
});
//合併公共路由以及重定向規則
const routes = [{
    path: '/',
    redirect: '/Common/Index',
  },
  ...generator,
  {
    path: '*',
    component: () => import('@/views/Common/404.vue'),
  }
];

export default routes;

//router.js
import VueRouter from 'vue-router'
//導入生成好的規則
import routerRoutes from "./routes.js";
Vue.use(VueRouter)
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: routerRoutes,//使用
  scrollBehavior: (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition;
    } else {
      return {
        x: 0,
        y: 0
      };
    }
  },
});
export default router