vue实现自动生成路由,非手动创建,含避坑点

自动生成路由js文件:autoRouter.js

let routeArr = [];
let baseUrl = '@/components/settingManagement/';
const content = require.context('../components/settingManagement/', true, /\.vue$/);
content.keys().forEach(e => {
  const path = e.substring(e.indexOf('/'), e.lastIndexOf('.'));
  const text = e.substring(e.lastIndexOf('/') + 1);
  const name = `${text.replace('.vue', '')}`;
  //额外信息,写到一个同名js文件里,动态引入
  let external = require(`@/components/settingManagement/${name}.js`);
  let routeObj = {
    path: path,
    name: name,
    // 避坑,动态导入静态资源时一定不要把整个路径当成变量
    component: () => import(`@/components/settingManagement/${text}`),
    // 额外信息填充
    meta: external.default
  };
  routeArr.push(routeObj);
});
export default routeArr;

额外补充信息js文件,与vue文件同目录,同名

const obj = { title: '示例页面标题' };
export default obj;

使用自动生成的路由

import routeArr from './autoRouter';
const router = new VueRouter({
  ...routeArr
});

你可能感兴趣的:(vue.js,javascript,前端)