preface

This article is inspired from the actual project, with the continuous growth of the project, more and more pages, have to vue-Router routing management complex into a simple, gradually automated process, I hope to trigger everyone’s thinking;

Logical route management

In a single page application of Vue + VUe-Router, we generally manage our pages in a single JS file as follows:

const routes = [{
  path: '/page-one/index'.component: (a)= > import('./pages/page-one/index'),
  meta: {
    title: 'page-one-index'}}, {path: '/page-one/sub-page'.component: (a)= > import('./pages/page-one/sub-page'),
  meta: {
    title: 'page-one-sub-page'}}, {path: '/page-two/index'.component: (a)= > import('./pages/page-two/index'),
  meta: {
    title: 'page-two-index'}}, {// Other pages...
}];

export default new VueRouter({ routes });
Copy the code

The advantage of this approach is centralized page management; The disadvantages are also obvious. As the project scale grows larger and larger, a single JS will manage a large number of page routes, which will be difficult to maintain.

Resolution and polymerization

Since it is difficult to maintain a large number of page routes in a single JS file, it is better to split the route management according to the business, the corresponding page of each business is managed by its corresponding routing file, and then aggregate the routing files of each business in the total routing file.

// page-one-router.js
// Page - Routing file managed by one
export default [{
  path: '/page-one/index'.component: (a)= > import('./index'),
  meta: {
    title: 'page-one-index'}}, {path: '/page-one/sub-page'.component: (a)= > import('./sub-page'),
  meta: {
    title: 'page-one-sub-page'}}];Copy the code
// page-two-routes.js
// Page-two manages the routing file
export default [{
  path: '/page-two/index'.component: (a)= > import('./index'),
  meta: {
    title: 'page-two-index'}}]Copy the code

The page-one and Page-two modules above are split routing management files, and the js module below is the aggregate routing management file of these two modules.

// root-router.js
// Total route management file
let routes = [];

[
  'page-one'.'page-two'
].forEach(m= > routes = routes.concat(require(`./pages/${m}/router`).default));

export default new VueRouter({ routes });
Copy the code

At this point, the optimization looks much better. If there are new services, just add the router.js file corresponding to the business and then register the business with root-router.js. But can we optimize it further? Every time the current scheme is added, two places need to be changed. And the answer is yes, we can optimize.

Automation scheme

Require.context () is provided in Webpack4 to introduce the corresponding module through regular matching

require.context(directory, useSubdirectories = false, regExp = / ^ \ \ / /);
Copy the code
  • Directory: indicates the directory to be retrieved
  • UseSubdirectories: Whether to retrieve subdirectories
  • RegExp: a regular expression for matching files

So we can modify the route loading logic of ‘root-router.js’ as follows:

let routes = [];

// auto import route.js
(modules= > modules.keys().forEach((key) = >{ routes = routes.concat(modules(key).default); })) (require.context('./pages/'.true, /router\.js$/));

export default new VueRouter({ routes });
Copy the code

When a new page is added, simply add the router.js file to its subdirectory, and the root-router.js file will automatically associate it.

thinking

Although this is only a small optimization, but in the optimization process reflects a purpose of engineering, is to minimize manual operation, reduce maintenance costs.