vue は addrouter を使用して動的ルーティングを追加します

beforeEach および addRouter のルートインターセプト

注:
1. beforeEach (ルートが実行されるたびにトリガーされるグローバル ルート ガード) と addRoutes の動作メカニズムを必ず理解し、無限ループに陥りやすいため、適切な判断と操作が必要です。ルートが呼び出されるたびに addRouter メソッドを実行しないでください。

2. addRoutes フックを使用した後、next() を直接呼び出します。現在のページのルートが addRoutes を通じて追加された場合、対応するルートはレンダリングされず、現在のアクセスにジャンプできないため、next を呼び出す必要があります。現在のページをリダイレクトします。Route (next({…to, replace: true}))

理解: ルートのプリフック (router.beforEach) に入るとき、このジャンプ中にルートの構造は変更されていないため、router.addRoutes は有効になっていないと考えられ、新しく追加されたルートは表示されません。ルーターのオプションを出力するとき (実際、動的ルーティングは router.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 })
  }
})