vue-router动态路由

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

1、路由：

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

　　所以，路由分为了默认路由和权限路由两部分：
　　默认路由：登陆页。
　　权限路由：其余全部须要控制权限的路由。

2、登陆：

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

3、入口main.js配置：

　　一、在route.beforeEach中，判断用户是否登陆，已登陆next()，未登陆跳到登陆页。
　　二、有些页面可能只有管理员或特殊级别人员看到，能够辅助role进行判断。router的meta里能够携带要求的角色权限信息。
　　三、处理刷新的状况：若是页面刷新，由于store里的数据彻底丢失，本地localstorage恢复数据。

4、配置路由：

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

　　一、store里用routesAdded字段表示路由是否已经动态加载。
　　二、默认routesAdded值为false，登陆成功缓存数据时缓存的的值也是false。
　　三、因为无论是刷新页面仍是vue router push，App都会created，因此动态配置路由的工做放到了App的created里了。
　　四、若是store里routesAdded为false，配置动态路由。

5、动态路由：

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