载入异步路由

ps酷教程

已于 2022-08-08 22:57:17 修改

阅读量224

点赞数

分类专栏：前端学习文章标签：前端 javascript vue.js

于 2022-08-08 21:40:53 首次发布

本文链接：https://blog.csdn.net/qq_16992475/article/details/126236804

版权

前端学习专栏收录该内容

145 篇文章 7 订阅

订阅专栏

function loadView (view) {
  // return (resolve) => require([`@/views/${view}`], resolve)
  return ()=> import(`@/views/${view}`)
}

【dashboard.js】
export default [
  {
    path: "/workbench",
    name: "workbench",
    meta: {
      title: "工作台",
      breadcrumb: ["Dashboard", "工作台"],
    },
    component: () =>
      import(/* webpackChunkName: "workbench" */ "@/views/system/menu.vue"),
  },
  {
    path: "/analysis",
    name: "analysis",
    meta: {
      title: "分析页",
      breadcrumb: ["Dashboard", "分析页"],
    },
    component: () =>
      import(/* webpackChunkName: "analysis" */ "@/views/system/role.vue"),
  },
];

【store/modules/user.js】
// 递归获取router/modules目录下的所有以.js文件结尾的暴露出来的模块
const routeFiles = require.context("@/router/modules", true, /\.js/);
console.log(routeFiles); // ['./dashboard.js','./mall.js','/system.js']

routeFiles.keys().forEach((key) => {
  const route = require("@/router/modules" + key.split(".")[1]);
  allRoutes.push(...route.default);
});