编程知识 cdmana.com

Dynamic route registration of Vue require.context

Demand scenarios :

In the daily function practice and debugging process , Need one demo Functional testing of the project , Because of the frequency .vue At the same time , Again router.js Register the route in the file , It's a bit boring and boring . Based on this starting point , Whether to automatically read the folder under the route .

 

Draw on ideas :

Reference resources vue The function of Automatic global registration of basic components , To see a require.context Method , You can read the file information in a folder . So consider , Using this method , obtain views Under folder .vue page , Folder name as routing name

require.context Introduction to the use of :

One webpack Of api, Through execution require.context Function to get a specific context , It is mainly used to realize automatic import module , In front end Engineering , If there are many modules introduced from a folder , You can use this api, It will traverse the specified file in the folder , And then automatically import , So that you don't need to make every explicit call import The import module
 

Page code :

As shown in the figure below ,views The contents of the folder , We need to register the route .

The path to the file is 2 Kind of ,(1) ordinary vue Function page , Directly hanging on views Under the folder ;(2) Complex pages , stay views Under the new folder for processing .

Currently, the routing pages that need to be registered automatically , Is aimed at “ Directly hanging on views Folder ” Next page .( because viewsx The second level of the page , I haven't come up with a good plan for the moment )

 

router/index.js Page code

journey :

(1) The first thought , I want to use array objects to define , Route name and introduced path address , But I don't think it's automatic enough , newly build .vue You still need to add files manually ;

(2) Later I thought of using require.context Method to get fileName, Then cut and concatenate according to the string , Get what I need url Relative path to file ;

   for example : component: () =>import(【 Variable 】), But it turns out ,import() Inside , You can't use variables !!!!!!!!!
(3) Due to import Restrictions on the use of , Cannot be used dynamically () =>import The grammar of , So we are considering , Can we replace the writing method introduced by asynchronous loading directly . Through the analysis of , obtain pathConfig There is an attribute in the field , Is specified vue Page default Module content . After testing , have access to .

  pathConfig The printed contents are as follows :

    

(4) therefore “views” Under folder ".vue" file , Introduction of success , And use variables routerAry Store it , Use concat Method to manually register other routing information , Connect , Route registration .

 1 import Vue from 'vue'
 2 import VueRouter from 'vue-router'
 3 Vue.use(VueRouter)
 4 
 5 
 6 //  Query... In the specified folder vue page , Automatic route registration 
 7 //  Only applicable to : Multiple routing pages under a folder . For simple page registration 
 8 // pathConfig.default The content of , Is specified vue Page default Module content , Equate to : () => import('xxxx')
 9 const contextInfo = require.context('../views', false, /.vue$/);
10 let routerAry = []
11 contextInfo.keys().forEach(fileName => {
12     const pathConfig = contextInfo(fileName)
13     let path = "/" + fileName.substring(2,fileName.length-4)
14     routerAry.push({
15         path,
16         component: pathConfig.default
17     })
18 })
19 
20 const routerList = [
21     {
22         path: "/",
23         redirect: "/animate",
24     },
25     {
26         path: "/openlayers",
27         component: () => import('../views/openlayers/openlayers')
28     },{
29         path: "/render",
30         component: () => import('../views/render/render')
31     },{
32         path: '/vuex',
33         component: () => import('../views/vuex/vuex')
34     },{
35         path: "/echarts",
36         component: () => import('../views/echarts/echarts')
37     },{
38         path: "/ztree",
39         component: () => import('../views/ztree/ztree')
40     },{
41         path: "/ocxplayer",
42         component: () => import('../views/ocxplayer/ocxplayer')
43     },{
44         path: "/animation",
45         component: () => import('../views/animation/animation')
46     },
47 ]
48 const newRouterAry = routerList.concat(routerAry)
49 const router = new VueRouter({
50     routes: newRouterAry
51 })
52 export default router

 

版权声明
本文为[Purple vine]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224172849592w.html

Scroll to Top