03组件批量注册

全局组件注册

• 引入Vue实例对象

• 遍历全局组件文件夹

• 批量注册全局组件

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
  )
})

全局组件内容

<template>
  <div>Base Test</div>
</template>

<script>

export default {
  name: 'BaseTest'
}

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

在页面中使用全局组件

• 驼峰写法自动换成以-间隔的

• 大写字母换成小写

<base-test></base-test>

路由注册

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

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

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不进行操作

• 将其他组件路由合并成数组

• 最后注册路由

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
})

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

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')
  }
])

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

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