Context Usage scenario

When your project has components that are used frequently, we call these components base components. But you don’t want to manually import it every time you use it and declare it in the Components option, which is tedious. For this scenario, the require.contextAPI is used to register the underlying components globally.

Context parameter description require.context

  • The first parameter, the file path to be traversed
  • The second parameter, whether you need to traverse the subdirectory
  • The third argument, the regular expression that matches the file name

Don’t use the require. The context

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}
Copy the code

Using the require. The context

globalRegisterCom.js

Import Vue from 'Vue' import {upperFirst,camelCase} from 'lodash' import {upperFirst,camelCase} from 'lodash' Const requireComponent = require.context('./components', false, / Base [a-z] \ w + \. (vue | js) $/) requireComponent. Keys. ForEach (fileName = > {/ / access component configuration (content) const componentConf = RequireComponent (fileName) const componentName = upperFirst(camelCase(fileName.split('/')) .pop().replace(/\.\w+$/, ''))) // Global register component Vue.component(componentName, // if this component option is exported via 'export default', // Then '.default 'will be used first, // otherwise fall back to using the module root. componentConfig.default || componentConfig ) })Copy the code

Configure automatic route import

The API can also be used to automatically import route configurations, making routes more maintenance-friendly

Application scenarios

When there are many routes configured, we can split the route configuration file into folders on each page,

Step one

For example, the user module has the corresponding router.js under the module, and the content is as follows

// src/views/user/router.js

import Layout from '@/layout'

export default {
  path: '/client',
  component: Layout,
  redirect: '/client/list',
  meta: { cache:false },
  children: [
    {
      path: 'list', 
      component: () => import('./'),
      name: 'ClientList',
      meta: { title: 'xxx', keepAlive: false }
    },
    {
      path: 'clientDetail/:id',
      name: 'ClientVirtualEdit',
      component: () => import('./detail'),
      meta: { title: 'xxx' },
      props: true,
      hidden: true
    }
  ]
Copy the code
Step 2

When creating a route, you can collect the router-js file of all modules under views, obtain the content, and then add it to the route configuration

// SRC /router/router.js import Vue from 'Vue' import router from 'vue-router' /** ** Automatically generate and distribute routes * Collect all routing files in views */ const routerFiles = require.context('@/views',true,/router\.js$/) const routerFilekeys = routerFiles.keys() const sourceRoutes = routerFileKeys.reduce((routes, file) => routes.concat([routerFiles(file).default]), []) const createRouter = () => new Router({ base: '/app/', mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }), sourceRoutes }) const router = createRouter() export default routerCopy the code

reference

Vue official document