持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

路由的加载可以说在单页面应用中是非常重要的，我们的前端页面切换考的主要就是路由们今天就介绍一下刚在项目中用到的路由动态加载，根据后端的权限配置相应的路由

在项目中经常会用到动态路由匹配，目前想到了三种方式

路由全加载

最笨的方法就是路由全加载，然后拿到所有的路由，我只知在页面显示用户可以操作的按钮，这样就可以匹配到需要的路由

弊端：

当然这种方式有一个弊端，就是当用户直接输入url时，可能会跳转到他没有权限操作的路由，这种方式很不安全

写死路由的配置角色

把每个角色的权限都写死，然后根据角色配置路由，但是这样做我们如果需要新建角色就需要重新部署路由配置

动态添加路由

这个也是我觉得最好的方式 根据后端传来的用户信息，让他在里面配置url，我们在根据url进行路由匹配

• 我们创建一个文件夹route/Home放路由导出的js文件
• 我们创建一个文件夹views/Home放vue文件
• 然后用webpack提供的require的context方法拿到所有的路由配置
• 再用node的require把路径的所有的文件导出到一个数组中
• 再把数组中的值的path和后端传来信息的url相匹配
• 调用router.addRoute方法添加到子路由中 这样我们就完成了路由的动态匹配，同时对路由文件进行了一定的封装，显得更加简洁，更容易修改

结束

希望大家有所收获，这个其实还是很简单的，但是我们在做开发时经常需要用到这个，希望大家能给个赞，加油，一起努力！