vue实现动态路由添加（简单无废话第二种方法）

最近学习了后台管理系统路由权限部分实现的第二种思路，进行前面介绍过第一种方法: vue实现动态路由添加（简单无废话版本）

这里只是记录我个人最后实现的思路，本人由于是初学者，可能思路和代码有不正确地方，还求多见谅。也请能不吝赐教，一同进步。

一，思路讲解

先回顾前面一种方法：前面说的一种动态路由的实现方法，就是我们先将所有的菜单权限对应的页面建立好,然后我们不把真实的路由定义好。通过我们请求后台，后台将该帐号对应的权限菜单和路由传递过来后，我们通过处理信息后，利用router.addRoute方法来生成最终的路由，这样用户进入没有权限的页面，因为没有真实的路由，是无法成功的。

第二种思路： 这次的方式是我们将所有的菜单权限对应的页面建立好,然后我们把真实的路由也定义好。这时你可以会说，那不是等于没有限制用户的权限。当然，我们确实没有对用户的权限进行限制，所有接下来我们就需要对用户的权限进行处理。我们需要使用到路由导航前置守卫(Router.beforeEach)。我们会请求后台，将用户的所有菜单权限传递过来，我们进行数组的扁平化后保存起来,然后在路由导航前置守卫中每次进入路由前通过当前的to.path与保存的所有菜单权限路由的数组进行对比，如果存在就让用户通过，不存在就提醒用户无权限，并组织路由通过。

二，具体实现

1.我们先请求后台获取到所有的路由信息并扁平化：

在pinia中完成

//扁平化数组
        this.allMenuList = []
        this.recursionMenu(this.menuList)
		//通过递归函数将数组扁平化
	    recursionMenu(menuList: any) {
    
    
	      menuList.map((item: any) => {
    
    
	        if (item.children?.length > 0) {
    
    
	          this.recursionMenu(item.children)
	        }
	        this.allMenuList.push(item.path)
	      })
	    },

原始的路由数据格式：

扁平后的数据格式：

2. 在路由导航守卫中进行判断：

在Router.beforeEach中：

 const store = useUserStore() //获取路由信息数组的pinia
if (store.judgeRoute(store.allMenuList, to.path)) {
    
    
     return true					//符合权限时候，允许通行
   } else {
    
    
     return {
    
     name: 'NotFound' }	//没权限时，跳转到自定义错误页面
   }

在pinia中完成：

    judgeRoute(routerList, route) {
    
    
      return routerList.find( el => {
    
    
        return route === el
      })
    }

这样我们就实现了功能了，这种方式不需要我们对路由进行动态的添加，因为所有的路由我们已经都定义好了，我们只需要在路由导航守卫中进行判断即可。最难的地方是在路由的扁平化处理，处理完成后就只需对比即可了。