vue使用addrouter添加动态路由

路由拦截beforeEach和addRouter

注意：
1.一定要理解beforeEach（全局的路由守卫，每一次路由执行都会触发）和addRoutes的运行机制，这里容易陷入死循环，所以一定要做好判断，不要每一次路由调用都执行addRouter的方法

2.使用 addRoutes 钩子后, 直接调用 next() , 如果当前页面的路由是通过 addRoutes 添加进去的，对应的路由不会渲染，当前访问是没法跳转进去的, 所以需要调用 next, 重定向当前的路由（next({…to, replace: true})）

理解：当进入 路由的 前置钩子 (router.beforEach) 的时候,本次跳转时, 路由的结构没有变化，所以我们会认为router.addRoutes没有生效，打印router的option也没有出现新加的路由（其实router.options里面打印不出动态路由，生效了也无法在options里面找到）

let hasMenus = false //判断是否添加过路由
router.beforeEach((to, from, next) => {
 	//to: Route: 即将要进入的目标 路由对象

	//from: Route: 当前导航正要离开的路由

	//next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
	if (hasMenus) {
	//如果有路由，向下执行
   	 next()
  	} else {
  		//如果没有，添加动态路由
    	trendsRouter.forEach(ele => {
      		router.addRoute(ele)
    	});
    	hasMenus = true
    	next({ ...to, replace: true })
  }
})