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

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就能扫描我们想加载的所有路由配置文件，将其中的配置信息添加到路由表中，实现路由的自动加载。