addRoute动态添加路由及问题处理

使用很简单，具体也可以看文档，主要描述中间可能遇到的坑

1.使用addRoute

// 下面都是必填，其它meta按需求添加      
router.addRoute({
			path: '',
			name: '',
			component: () => import(''),
		});

注意事项（这些逻辑可以封装好）

1. 动态添加路由，刷新页面，路由会丢失

            解决办法：在路由守卫beforeEach里面判断，如果浏览器刷新没有数据，从新请求数据并添加路由，（这里可以存在vuex里面）

                     最后通过 return next({ ...to, replace: true }); 重定向到应该跳到的路由

2. path: '*',匹配找不到页面时，404处理，因为路由添加和查找路由机制都是依次执行的，先添加了静态路由，

         在添加动态路由时，添加的路由就会在静态路由后面，会优先匹配上path: '*' 页面，next({ ...to, replace: true })

         这一步可以打印看一下，第一次的path是你原本路由，但是因为先匹配上了path: '*'，就导致走不到后面动态添加的路由，

            解决办法：添加动态路由最后，在添加一次path: '*'，需要name一致，覆盖掉静态路由的，path: '*'，

            （需要注意）静态路由也需要path: '*'，这里的path:'*'，一般用做容错处理，只要没有的页面，都匹配上并跳转到404页面

3. a账号权限多，退出时页面没有刷新，b权限少，登录以后可以通过地址栏访问a才能访问的页面

            解决办法：重置路由，使用 router.matcher = new VueRouter({

                                       routes: routes, // routes 是你的静态路由

                                    }).matcher;

                     如果是router 4.X 可以直接使用 removeRoute API

4. 添加路由时，如果子级没有添加到父级路由下，不能通过 父级路由/子级路由访问，只能按照一级路由访问

         且子级路由添加到父级路由时，需要拼接父级路由否则也不能访问

            解决办法：在判断需要添加到指定父级下时，拼接父级和子级路由，并通过addRoute 传递第一个参数为，

            父级name的参数，添加到指定父级下，就可以达到，单独访问子级生效，及父级+子级路由访问生效，

            “这里为什么能单独访问也能生效，应该是添加父级时存在子级存在，所以可以通过子级直接访问”