设想一下，我们在做一个体量非常大的项目，这个项目有很多的模块和相当多的页面。当我们想修改一个路由的时候，我们打开了router文件夹下的index.js文件时，一串长到鼠标滚轮需要滚大半天才滚到底的路由简直让人头皮发麻。
在开始之前先说说适用的场景：体量非常大的项目，且这个项目分为很多的模块。
我们分布式动态路由的目的就是：实现路由模块自动化引入，让路由更加清晰直观。
一、例子
假设我们的项目中有两个模块，login模块和goods模块。
每个模块下都是自己模块的页面，当然不只是一个，这里只是一个简单的例子方便大家理解
然后我们修改一下router文件夹，添加login.router.js文件和goods.router.js，将文件两个模块的路由分别存放。
1、下面是login.router.js的代码：
export default { path: '/login', name: 'login', component: () => import ('../views/login/login'), //懒加载 children: [] }
2、goods.router.js也是同样的道理:
export default { path: '/goods', name: 'goods', component: () => import ('../views/goods/goods'), //懒加载 children: [] }
3、接下来是核心代码（router文件夹下的index.js文件中），也是分布式动态路由实现的关键：
//index.js import VueRouter from 'vue-router' const routerList = [] function importAll(r) { r.keys().forEach((key) => { routerList.push(r(key).default) }) } importAll(require.context('./', false, /.router.js/)) export default new VueRouter({ routes: routerList })
这样，我们的分布式动态路由就实现好了，是不是很简单！
接下来我们来实验一下，浏览器地址栏输入http://localhost:8080/#/login，页面正常显示
二、require.context介绍
require.context是Webpack中用来管理依赖的一个函数,此方法会生成一个上下文模块,包含目录下所有模块的引用,通过正则表达式匹配,然后require进来。
require.context(directory, useSubdirectories, regExp)
参数：
- directory: 要查找的文件路径
- useSubdirectories: 是否查找子目录
- regExp: 要匹配文件的正则
示例：
require.context('./test', false, /\.test\.js$/); //（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。
三、路由
1、动态路由
对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序。
2、添加路由
动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。
router.addRoute({ path: '/about', component: About })
3、删除路由
- 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：
router.addRoute({ path: '/about', name: 'about', component: About }) // 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的 router.addRoute({ path: '/other', name: 'about', component: Other })
- 通过调用 router.addRoute() 返回的回调：
const removeRoute = router.addRoute(routeRecord) removeRoute() // 删除路由如果存在的话
- 通过使用 router.removeRoute() 按名称删除路由：
router.addRoute({ path: '/about', name: 'about', component: About }) // 删除路由 router.removeRoute('about')
当路由被删除时，所有的别名和子路由也会被同时删除
4、添加嵌套路由
要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute()，这将有效地添加路由，就像通过 children 添加的一样：
router.addRoute({ name: 'admin', path: '/admin', component: Admin }) router.addRoute('admin', { path: 'settings', component: AdminSettings })
等效于：
router.addRoute({ name: 'admin', path: '/admin', component: Admin, children: [{ path: 'settings', component: AdminSettings }], })
5、在 setup 中访问路由和当前路由
因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this.r o u t e r 或 t h i s . router 或 this.router或this.route。作为替代，我们使用 useRouter 和 useRoute 函数：
import { useRouter, useRoute } from 'vue-router' export default { setup() { const router = useRouter() const route = useRoute() function pushWithQuery(query) { router.push({ name: 'search', query: { ...route.query, ...query, }, }) } }, }
route 对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该避免监听整个 route 对象。在大多数情况下，你应该直接监听你期望改变的参数。
import { useRoute } from 'vue-router' import { ref, watch } from 'vue' export default { setup() { const route = useRoute() const userData = ref() // 当参数更改时获取用户信息 watch( () => route.params.id, async newId => { userData.value = await fetchUser(newId) } ) }, }
请注意，在模板中我们仍然可以访问 $router 和 $route，所以不需要在 setup 中返回 router 或 route。
