设想一下，我们在做一个体量非常大的项目，这个项目有很多的模块和相当多的页面。当我们想修改一个路由的时候，我们打开了router文件夹下的index.js文件时，一串长到鼠标滚轮需要滚大半天才滚到底的路由简直让人头皮发麻。
在开始之前先说说适用的场景：体量非常大的项目，且这个项目分为很多的模块。
我们分布式动态路由的目的就是：实现路由模块自动化引入，让路由更加清晰直观。
实例
假设我们的项目中有两个模块，login模块和goods模块。
每个模块下都是自己模块的页面，当然不只是一个，这里只是一个简单的例子方便大家理解
然后我们修改一下router文件夹，添加login.router.js文件和goods.router.js，将文件两个模块的路由分别存放。
下面是login.router.js的代码：
export default {path: '/login',name: 'login',component: () =>import ('../views/login/login'), //懒加载children: []
} goods.router.js也是同样的道理:
export default {path: '/goods',name: 'goods',component: () =>import ('../views/goods/goods'), //懒加载children: []
} 接下来是核心代码（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` 结尾。
动态路由
对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 Vue CLI UI )这样的应用程序可以使用它来扩展应用程序。
添加路由
动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。
router.addRoute({ path: '/about', component: About })
删除路由
- 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：
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')
当路由被删除时，所有的别名和子路由也会被同时删除
添加嵌套路由
要将嵌套路由添加到现有的路由中，可以将路由的 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 }],
})
在 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。
身份验证)
