Vue+Router automatically generates routing method

Use require.context() to automatically generate routes

1. In actual development, adding a new page may have to rewrite the routing problem, causing the routing file to be revised every time. such as:

There are many files and it is more complicated to modify.

2. Solution:

In actual project development, you generally define your own routing file in each page module, and merge the files in the total index entry to form a new route. (The development project of personal experience is solved in this way, there are better home reviews and learning, thank you)

3. Refer to the method of batch importing files:

There is such a sentence on the webpack official website:

The above is a screenshot that I moved directly from the official website. If you need a more detailed official demo, you can click on the link I placed below:

webpack official Chinese document​webpack.docschina.org

4. Project structure

All the pages that need to be redirected in the development project are designed in a directory location, and the remaining required components are placed in other files. Page components that do not need to be displayed affect the effect of routing generation, such as:

Then use the regular to get the file, get the path and the name of the file, and then encapsulate the corresponding route attribute assignment. For example, this code:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

let routerArr = []
const contexts = require.context('../pages', true, /\.vue$/)
contexts.keys().forEach(value => {
  const path = value.substr(value.indexOf('/'), value.lastIndexOf('.') - 1)
  const componentLocation = value.substr(value.indexOf('.') + 1, value.lastIndexOf('.') - 1)
  const componentName = componentLocation.substr(componentLocation.lastIndexOf('/') + 1)
  routerArr.push({
    path: path,
    name: componentName,
    component: () => import(/* webpackChunkName: "alarm" */ `../pages${componentLocation}`)
  })
})

export default new Router({
  mode: 'hash',
  routes: routerArr
})

The screenshot shows the routing format that I can finally get:

5. Summary

From the above introduction, we can see that the effect of the generated single-layer routing method, the format can be understood as:

Page one: /a

Page two: /a/b

.......

I didn’t write the package format that includes self-routing, but I didn’t write it doesn’t mean it can’t be done. The idea is the same, but the location information of the folder and the location information of the vue file need to be specially judged, and then the parent-child routing format is encapsulated. .

There are also dynamic information such as routing metadata filling, and you can also call static attributes during the process of encapsulating routing information with circular keys data, or define external configuration files for operation. In any case, it is to prevent the repeated increase of page operations and the need for routing direction.

Although it does not take long to add new directional routing code each time, the laziness of streamlining files is not only to save development time, the automatic generation of directional routing is also a standard for archiving folders and file locations. (Well, if everyone disagrees, please be merciful and don't spray me to death).

 

As mentioned above, there will be time to add parent-child routing.

 

Special statement: The above only represents personal opinions, don't spray if you don't like it, remember to like it and follow it!

---