vue 组件自动注册

时间:2020-04-21
本文章向大家介绍vue 组件自动注册,主要包括vue 组件自动注册使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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;

  

原文地址:https://www.cnblogs.com/lIllIll/p/12746276.html