this.$store.addRoutes(）动态路由刷新失效

router.addRoutes

动态路由

动态路由可以由前端控制（路由权限或者隐藏功能），或者后端实现，数据库存储权限根据权限传给前端，前端组装后add进路由，本次记录使用vue-router开发动态路由的探索（煎熬）过程。
1：把权限按层级关系存入数据库
2：登录时跳转到主页，
3：登录后持久化路由信息在前端框架，可以用 localStorage，store（使用vuex-persist）
4：在路由守卫router.beforeEach（）里新增路由代码如下

router.beforeEach((to, from, next) => {//to目标信息，from来源信息，next：路由的控制参数
    var routersss = store.state.dynamicRouters//获取路由信息
    if (to.path === '/login') {
        next()
    } else {
        const accessToken = localStorage.getItem('Authorization');//获取登录信息
        if (accessToken != null) {
            console.log()
            debugger
            if (to.matched.length < 1) {//判断是否刷新
                router.addRoutes(store.state.dynamicRouters);//新增路由
                next({ ...to, replace: true })//判断路由中是否有to里的目标
            } else {
                next()
            }
        } else {
            next({ path: 'login' })
        }
    }
})

5：在网上我看了太多的demo，但其实讲清楚的不多，我并不是一个前端开发，看着很多例子里引入了很多东西真的看得一脸懵逼，经过很煎熬的测试和查阅求问终于大概明白一部分原因了。
1：如果你以为新增路由只要使用router.addRoutes后你的路由就会新增一个节点，你就可以正常使用新增的路由的话那就错了，router.addRoutes后的确是可以正常使用router.push到新增的页面，但如果你直接你刷新一下就发现凉凉了，是一片空白
2：为什么？既然可以push到页面那说明是操作成功了，但是为啥刷新就不行？？在多次测试和游览很多帖子里我找到解决这个问题需要在路由守卫这里，但别人贴出的代码真的不清楚人家路由守卫里写的参数和方法的作用是什么，但有一点是确定的需要判断出刷新的操作，然后再新增动态路由。
3：在很多次debug的过程里，我发现正常路由过去的访问和刷新被阻塞的访问有一个差别，阻塞的访问to的部分里to.matched这个数组是空的，所以我在这里进行判断，如果数组为空那说明发生了“阻塞”行为，所以就add路由，并由代码next({ ...to, replace: true })来循环判断to.path是否在路由里，如果在了那为空的数组就会非空，就放行了，就解决这个问题了

其他

1：这个问题我死磕了两天，因为不熟前端，store，路由守卫。。。这些东西是什么都是从零开始看的，至少从github上找了五个demo来线下运行，看了至少也有几十个帖子看起来有可能的方法都试了。过程真的很煎熬，但我觉得只要有这个方法在，应该是不难找到结果的，结果我也解决了，但回头一看，真的这个问题真的不难，我觉得在解决问题的时候认真检查debug里的东西会很利于找到答案
2：其实我真的很好奇，为什么刷新了会失败，这个to的数组是什么东西，有没有其他解决方法我看到很多都是在路由守卫里解决，也有一个不是，但他的方法太复杂我没有去使用，有兴趣的同学可以去看某同学解决方法
3：希望能帮助被这个问题困住的同学，真心希望有专业大佬路过能解答一下，为什么会出现这个问题，最好的解决办法是什么。