> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/vuecli/03-zu-jian-pi-liang-zhu-ce.md).

# 03组件批量注册

## 全局组件注册

* 引入Vue实例对象
* 遍历全局组件文件夹
* 批量注册全局组件

```javascript
import Vue from 'vue'
const requireContext = require.context(
    './globar', 
    true, //递归查找目录
    /\.vue$/ //匹配规则
)

requireContext.keys().forEach((filename) => {
  const componentConfig = requireContext(filename) //获取组件内容
  Vue.component(
    componentConfig.default.name || componentConfig.name,
    componentConfig.default || componentConfig
  )
})
```

全局组件内容

```javascript
<template>
  <div>Base Test</div>
</template>

<script>

export default {
  name: 'BaseTest'
}

</script>
<style lang='' scoped>
</style>
```

在页面中使用全局组件

* 驼峰写法自动换成以`-`间隔的
* 大写字母换成小写

```javascript
<base-test></base-test>
```

## 路由注册

路由在组件化之后，进行批量注册

例如·在`users`文件夹是关于用户所有的路由

```javascript
export default [
  {
    path: '/users',
    name: 'user',
    component: () => import('@/views/layout/common.vue'),
    children: [
      {
        path: 'list',
        name: 'user-list',
        component: () => import('@/views/users/list.vue'),
        meta: { title: '用户列表' }
      },
      {
        path: 'edit',
        name: 'user-edit',
        component: () => import('@/views/users/edit.vue'),
        meta: { title: '用户编辑页面' }
      }
    ]
  }
]
```

在路由注册文件`index.js`中引入所有路由

* 同样使用到`require.context`函数遍历当前路由文件夹
* 对路由注册文件`index.js`不进行操作
* 将其他组件路由合并成数组
* 最后注册路由

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

let routes = []
const requireContext = require.context('./', true, /\.js$/)
requireContext.keys().forEach((filename) => {
  if (filename === './index.js') {
    return
  }
  const routeModule = requireContext(filename) // 获取文件内容
  routes = [...routes, ...routeModule.default] // 合并两个数组内容
})
const router = new VueRouter({
  routes
})
```

在路由注册完成后，也可以动态的添加路由

```javascript
router.addRoutes([
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
])
```

全局路由守卫，添加跳转进度条

```javascript
// 全局路由守卫
router.beforeEach((to, form, next) => {
  Nprogress.start()
  next()
})
router.afterEach((to, from) => {
  Nprogress.done()
})
```