vue路由的自动化注册

目录结构

1111.png

代码示例：

router文件夹，index.js代码：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "layout",
    component: () => import("../views/layout/Layout.vue"),
    //  定向首页
    redirect: "/admin-temp-list",
    // 上下文自动查找加载路由
    children: ((r) => {
      let routers = r.keys().map((key) => r(key).default);
      return routers;
    })(require.context("../views/", true, /router\.js$/)), // true  开启查找子目录
  },
];

const router = new VueRouter({
  mode: "hash",
  routes,
});

export default router;

views文件夹下各页面文件的router.js代码：

const AdminSeeList = () => import("./AdminSeeList.vue");
export default {
  path: "/admin-see-list",
  name: "admin-see-list",
  component: AdminSeeList,
};