vue-router动态路由

被这个动态路由折磨了三天，记录下经验：

一、路由：

　　路由分两块，一是公共页面，如登录页、不需要登录、不需要权限就能访问的页面。另一部分是后台动态返回的权限列表。

　　因此，路由分为了默认路由和权限路由两部分：
　　默认路由：登录页。
　　权限路由：其他所有需要控制权限的路由。

二、登录：

　　1、登录获取登录状态、用户信息、后端返回的权限列表；
　　2、本地localstorage缓存数据，为用户刷新页面保存数据。
　　3、进行页面跳转(跳到home页)。

三、入口main.js配置：

　　1、在route.beforeEach中，判断用户是否登录，已登录next()，未登录跳到登录页。
　　2、有些页面可能只有管理员或特殊级别人员看到，可以辅助role进行判断。router的meta里可以携带要求的角色权限信息。
　　3、处理刷新的情况：如果页面刷新，因为store里的数据完全丢失，本地localstorage恢复数据。

四、配置路由：

　　很多人把配置路由放在了route.beforeEach中，在这里判断用户是否已经加载路由，我也用了这个方法，但折腾了好久都没成功。最后换了个思路。

　　1、store里用routesAdded字段表示路由是否已经动态加载。
　　2、默认routesAdded值为false，登录成功缓存数据时缓存的的值也是false。
　　3、由于不管是刷新页面还是vue router push，App都会created，所以动态配置路由的工作放到了App的created里了。
　　4、如果store里routesAdded为false，配置动态路由。

五、动态路由：

　　1、递归过滤处理后台返回的权限列表，跟本地所有的权限路由进行比对过滤，生成一份需要动态加载的动态路由。
　　2、设置动态路由的默认跳转，如果路由有children就自动跳转到chidren的第一个路由，以此类推。
　　3、通过router.addRoutes动态添加路由。
　　4、动态路由加载完成后，将routesAdded设置为true，这样如果不刷新页面的话，就不用再次配置动态路由了。