# 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()
})
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zpliu.gitbook.io/booknote/vuecli/03-zu-jian-pi-liang-zhu-ce.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.