目标：学会动态路由的使用和设计
同学们，我又来了。这几天老在琢磨，这一期讲什么比较好。
想来想去，还是先把动态路由说一下，因为这个坑，真的很大！
如果没有人带，自己百度的话，很可能看几天也没搞清楚应该怎么玩，我之前也被这东西折磨了好久
先说下为什么要有动态路由，路由是指向页面的，我们把页面分为3类
1：不需要登录就能访问的，比如 登录页、注册页、忘记密码页、错误页。
2：所有登录用户都能用的，比如修改密码、修改个人资料等等，未登录时不能用。
3：和当前登录用户的角色相关的，角色比如 系统管理员、财务主管、普通员工等等，为了安全性，我们希望每个用户只能访问自己的页面。
网上的文章，有两种做法
1：在前端配置所有路由，并且配置使用此路由需要的权限（或者角色），用户登录后，从服务器获取到该用户的权限（角色），两者进行匹配。再将匹配结果动态加载
2：在前端只配置静态路由（不需登录就能用的），其他路由从服务器获取，动态加载
不知道为什么，我找了不少文章都是做法1，其实不科学，维护成本很高。
一个系统少说也会有十几个角色，权限就更多了（比如 创建用户、修改密码、禁止用户、激活用户 这些都是权限），这个对应表很复杂，并且随着系统功能的新增修改，角色和权限也是动态的。频繁修改服务器上的文件，绝对是一个头疼的事情，另外，权限体系在后端也是免不了的。也就是说，用做法1，需要在前后端都维护角色-权限表，如果配置出错，会出大事故。
所以，必须是做法2，干净又简单。
以上全是废话，希望只占用了一分钟。下面用最简单的例子进行说明
代码接上一章，我们先添加两个页面用于演示（注册和忘记密码）
内容还是最最简单的
然后我们在登录页，加两个链接
我们来看看效果（这两个页面的路由没有配置）
点击 注册或者忘记密码
然后我们看看，如何动态把路由加上去
我们先在登录页里加两个按钮，如下
script里面添加按钮对应的方法
现在看看router/index.js，我们改了什么 （完整代码在文章最后面）
其实很简单，只是做了个懒加载，然后调用router.addRoutes就结束了。
看看页面效果
这说明动态路由已经实现，初始化路由这个，是用户点了“退出”以后要调用的，因为要把路由重置，安全。
还剩下一件事，就是routerArr这个数据，我们要在登录成功后，从服务器取过来，就完事了。
如何从服务器取数据，我们下回分解，本章完。
----附录 router/index.js完整代码
import Vuefrom 'vue'
import Routerfrom 'vue-router'
Vue.use(Router)
//这里的publicRoutes是不需要登录就能访问的，动态路由需要登录后，根据用户权限加载
export const publicRoutes = [
{path:'/',redirect:'/login'},
{path:'/login',component: () =>import('@/views/Login')},
{path:'/home',component: () =>import('@/views/Home')},
{path:'/userInfo/:userId',component: () =>import('@/views/UserInfo')}
]
const createRouter = () =>new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({y:0 }),
routes:publicRoutes
})
const router =createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter =createRouter()
router.matcher =newRouter.matcher // reset router
}
//根据componentPath，生成component对象，递归遍历了children
function setComponents (routerArr){
for (let i =0;i < routerArr.length;i++) {
let tempItem = routerArr[i]
let tempPath =tempItem.componentPath
//注意这个写法,如果不把@/views写出来，全部放在变量里执行会出错
tempItem.component = () =>import(`@/views/${tempPath}`)
if (tempItem &&tempItem.children &&tempItem.children.length >0) {
setComponents(tempItem.children)
}
}
}
export function addRouter(routerArr) {
setComponents(routerArr)
//参考https://router.vuejs.org/zh/api/#router-addroutes
router.addRoutes(routerArr)
}
export default router
