vue 组件自动注册

Posted 2021-02-27 lillill

import Vue from ‘vue‘
import Router from ‘vue-router‘

/**
 * 路由自动注册
 */
const requireComponent = require.context(
  // 其组件目录的相对路径
  ‘@/view/‘,
  // 是否查询其子目录
  true,
  // 匹配基础组件文件名的正则表达式
  /[A-Za-z0-9-_]+.(vue|js)$/
)
const routes = requireComponent.keys().map(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName);

  // 剥去文件名开头的 `./` 和结尾的扩展名
  const componentName = fileName.replace(/^./(.*).w+$/, ‘$1‘);
  console.log(componentName)
  // 全局注册组件
  const component = Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  );

  return {
    path: `/${componentName}`,
    // name: componentName,
    component,
  }
});
console.log(routes)
Vue.use(Router)
const router = new Router({
  mode: ‘history‘,
  routes,
  scrollBehavior(to, from, savedPosition) {
    return {x: 0, y: 0}
  }
})

export default router;