Vue中实现扫描指定路径自动加载路由

1.在项目中使用VUE-ROUTER

如果初始化项目的时候没有安装Vue Router，可以直接在根目录中输入：

npm install vue-router 

安装好组件之后，还需要在项目中引用并配置组件。

首先，在main.js中添加：

// 引入并使用vue-router import Router from 'vue-router' Vue.use(Router) // 引入自己的配置文件 ''内为自己的配置文件的路径 import router from './router' // 在new Vue中加入配置文件 new Vue({   router, // 加入配置文件   render: h => h(App) }).$mount('#app') 

而router.js文件中要写的就是路由信息，要实现自动加载相应目录下的所有路由，就需要在router.js文件中进行配置。

2.配置router.js文件

import Router from 'vue-router' // 单条路由添加和自动扫描可以同时使用，更灵活的控制路由范围 import Home from './views/Home.vue'  // 本语句作用是扫描指定目录下所有符合条件的文件 // 函数的三个入参分别是 // 1.要扫描的路径 // 2.是否递归扫描：true递归扫描，扫描指定文件夹下的所有子文件夹；false只扫描指定路径 // 3.正则表达式，/\.router\.js$/表示匹配以.router.js为结尾的文件 // 这里，正则表达式一定要和自己的路由信息配置文件的命名相符合，不然扫描不到 const modulesFiles = require.context('./modules', true, /\.router\.js$/)  const routers  = [] // 将扫描到的路由信息加入路由数组中 modulesFiles.keys().forEach(modulePath => {   const value = modulesFiles(modulePath)   routers.push(value.default) }) // 如果有的路由配置文件中所编写的路由信息不止一个（是个数组），使用如下的添加方式 // function registerRoute(route) { //   routes.push(route) // } // modulesFiles.keys().forEach(modulePath => { //   const value = modulesFiles(modulePath) //   if (value.default instanceof Array) { //       value.default.forEach(registerRoute) //   } else { //       registerRoute(value.default) //   } // })  export default new Router({   routes: [       ...routers,       // {       //     这里配置单条路由数据       // }   ] }) 

这样写好配置文件后，就可以自动扫描对应路径下的路由配置文件并加载配置信息了。

3.路由配置文件的编写

路由配置文件的命名要和自己的正则表达式相匹配，又要有辨识度，避免将非路由配置文件扫描加载，引发错误。路由配置文件内部需要export出一个或多个（json格式）路由信息（数组形式）。

例1-单个路由信息：

export default {   // path 保证全局唯一   path: '/user-login',   component: () => import('./user-login.vue') } 

例2-多个路由信息：

export default [     {   		// path 保证全局唯一   		path: '/user-login1',   		component: () => import('./user-login1.vue') 	},     {         // path 保证全局唯一   		path: '/user-login2',   		component: () => import('./user-login2.vue')     } ] 

经过以上的配置，Vue Router就能扫描我们想加载的所有路由配置文件，将其中的配置信息添加到路由表中，实现路由的自动加载。