动态路由 --- 实现不同权限用户不同导航栏展示

一、什么是动态路由?

        动态路由？顾名思义，路由不是固定的，是根据登录用户所拥有的权限。为用户特有的路由。此时的路由主要分为三个部分：常量路由（所有用户都能访问到的路由）；异步路由（根据用户权限特有的路由）；任意路由。

router文件夹中routes.ts路由文件中区分三种路由

异步路由asnycRoute

 二、动态路由的实现

        首先明白，用户在登录过后我们才知道用户属于什么角色、拥有那些权限、用户特有的路由，这些是登录后发请求获取用户的信息得到的。（tips：里面不仅仅包含异步路由，还包含用户的头像avatar链接、用户的名称name以及用户的角色roles：[超级管理员]）

用户信息包含的内容

       信息里面有个关键的数组：routers。是的！这里面包含了用户能去的地方！包括只有用户个人能去的地方和一些用户和其他用户能去的地方，以及用户1用户2用户3都能去的地方！需要记住的是，这里面有些地方只有用户1能去~~~这也是动态路由必要之处

1.将用户信息中的动态路由数组routes和路由名称name联系起来

开始建立相关连接

         将用户信息中的路由和路由name字段一致，这样后面通过过滤filter就知道专属我的有哪些路由了！而且路由元信息里面：‘title’，‘icon’，‘hidden’这些信息还可以利用起来，方便后面使用”

        新的问题来了，子路由也是动态的啊，我怎么知道哪些是我的呢？ ---  筛选函数：

2.设置过滤异步路由的函数，用于过滤异步路由

        

过滤路由

         这个函数中，第一个参数是文档中的异步路由asnycRoute（图一），第二个参数是用户信息中的routes专属路由数组。需要将asnycRoute中的每一个路由的name字段作为关键字放在用户专属路由routes里面查找（第一步的操作在这里体现出来了），最终返回的是异步路由asnycRoute中那些用户专属的路由，我们const一个userAsyncRoute帮用户存储起来，交给仓库中已经定义好的menuRoutes中。

        注意，这个过滤函数中有两个地方需要注意：第一个是两个if：首先判断name字段是否包含在其中，其次通过children.length判断是否有子路由；第二个是递归：filterAsyncRoute ---  函数自己用了自己一次。这是因为路由中有子路由。但是我们要去一层一层过滤。

3.整理并添加异步路由

筛选并整理异步路由

         注意到红色方框的内容了吗？虽然用户专属的地方整理好了（userAsyncRoute），我们还要把用户1和用户2、用户1用户2和用户3都能去的地方一并给用户，毕竟这些地方用户是可以去的（this.menuRoutes = [...constantRoute, ...userAsyncRoute, anyRoute]）。整理好了后，还要把这些路由添加进去。此时需要一个一个添加到路由中，用到了foreach遍历 -- 这个数组方法，以及addRoute（）函数添加路由：

[...userAsyncRoute, anyRoute].forEach((route: any) => {

          router.addRoute(route)

        })

4.生成路由导航栏

        用户动态路由中，主要分为三种情况：没有子路由、只有一个子路由、不止一个子路由；

         title：导航栏标题；icon：导航栏图标；hidden：表示路由标题在菜单中是否隐藏

          注意一下：template标签 --- 模板标签  ；component标签  ---  可以动态绑定我们的组件,根据数据不同更换不同的组件。它有一个is属性，is的作用就是显示指定的组件；

 

另外不要忘记在路由菜单跳转的页面设置<Router-view></Router-view>哦~