鏈枃鍥寸粫VueRouter涓殑璺敱缁勪欢澶嶇敤闂灞曞紑銆傚満鏅鐜伴」鐩粡甯镐細閬囧埌澧炲垹鏀规煡鐨勯渶姹傘€傞€氬父鏄€氳繃涓嶅悓鐨勮矾鐢辨寚鍚戝悓涓€涓〉闈㈢粍浠舵潵瀹炵幇椤甸潰澶嶇敤鐨勫姛鑳斤紝浣嗘槸椤甸潰澶嶇敤瀛樺湪涓€浜涚姸鎬侀棶棰樸€備互涓嬫儏鍐典笉缂撳瓨椤甸潰锛氫袱绉嶆儏鍐甸兘鏄姩鎬佽矾鐢卞尮閰?1)routea:/detail/1,routeb:/detail/2銆傚湪璺敱琛ㄤ腑鍖归厤/detail/:id(2)routeA:/new-detail/1,routeB:/edit-detail/1銆傝矾鐢辫〃涓尮閰?new-detail/:id鍜?edit-detail/:id鐨勫洓涓笉鍚岀殑url娉ㄥ唽浜嗗悓涓€涓〉闈㈢粍浠躲€傚満鏅紙1锛夛紝鍒囨崲椤甸潰锛屽彧璋冪敤beforeRouteUpdate閽╁瓙鍑芥暟銆傛棤闇€璋冪敤beforeRouteEnter銆乵ounted绛夛紝鍗冲彲鐩戞帶$route锛岃幏鍙朼ctive缁勪欢涓殑鏁版嵁锛屼笉浼氭贩娣嗐€傚満鏅?2)锛屽垏鎹㈤〉闈紝璋冪敤beforeRouteEnter閽╁瓙鍑芥暟锛屼笉璋冪敤created銆乵ounted绛夌敓鍛藉懆鏈熼挬瀛恇eforeRouteUpdate瀹樻柟瑙ｉ噴澶嶇敤缁勪欢锛堟寚鍔ㄦ€佽矾鐢卞尮閰嶏級鍦ㄥ綋鍓嶈矾鐢卞彉鍖栨椂璋冪敤锛屼絾鏄缁勪欢琚鐢紝渚嬪瀵逛簬涓€涓甫鏈夊姩鎬佸弬鏁扮殑璺緞/foo/:id锛屽湪/foo/1涔嬮棿璺宠浆鏃?foo/2鍜屽姩鎬佽矾鐢卞尮閰嶆枃妗ｏ紝璇风湅杩欓噷Respondtoroutingparameterchanges浣跨敤璺敱鍙傛暟鏃讹紝姣斿浠?user/foo瀵艰埅鍒?user/bar锛屽師鏉ョ殑缁勪欢瀹炰緥浼氳澶嶇敤銆傚洜涓轰袱鏉¤矾绾块兘娓叉煋鐩稿悓鐨勭粍浠讹紝鎵€浠ラ噸鐢ㄦ瘮閿€姣佸拰閲嶆柊鍒涘缓鏇存湁鏁堛€傜劧鑰岋紝杩欎篃鎰忓懗鐫€缁勪欢鐨勭敓鍛藉懆鏈熼挬瀛愬皢涓嶅啀琚皟鐢ㄣ€傚鐢ㄧ粍浠舵椂锛屽鏋滆鍝嶅簲璺敱鍙傛暟鐨勫彉鍖栵紝鏈変袱绉嶆柟娉晈atch锛堢洃鍚彉鍖栵級$route瀵硅薄浣跨敤2.2寮曞叆鐨刡eforeRouteUpdate銆俷avigationguard浣跨敤beforeRouteUpdate鏃讹紝濡傛灉璺敱涓紶鍏oolean妯″紡锛歱rops:true瑙ｈ€︾粍浠跺拰璺敱銆傝繖鏃跺€欏氨浼氬嚭鐜伴亾鍏疯幏鍙栭敊璇€傛瘮濡備粠/foo/1椤甸潰鍒囨崲鍒?foo/2椤甸潰鏃讹紝鍦╞eforeRouteUpdate涓幏鍙栧埌鐨刬nactive椤甸潰缁勪欢鐨刬d杩樺湪beforeRouteUpdatehook涓紝骞舵病鏈夋墽琛屼笅涓€涓洖璋冨嚱鏁颁腑鍐欑殑浠ｇ爜锛屽氨濂藉儚娌℃湁璋冪敤锛屼絾鏄鏋滃幓鎺塶ext()锛岃矾鐢变笉浼氳閲婃斁锛屾湁鐐瑰鎬€傞渶瑕侀槄璇绘簮鐮佸疄鐜伴€昏緫...瀹屾暣鐨勫鑸垎鏋愭祦绋嬪鑸Е鍙慴eforeRouteLeave锛堝湪鍘绘縺娲荤殑缁勪欢涓皟鐢級鍙互璁块棶缁勪欢瀹炰緥thisbeforeEach锛堝叏灞€pre-hook锛塨eforeRouteUpdate锛堝鏋滄槸澶嶇敤缁勪欢锛宼hencall)鍙互璁块棶缁勪欢瀹炰緥thisbeforeEnter(璺敱閰嶇疆涓?璺敱鐙韩)瑙ｆ瀽寮傛璺敱缁勪欢(濡傛灉鏈?beforeRouteEnter(婵€娲荤粍浠朵腑璋冪敤)beforeResolve(鍏ㄥ眬瑙ｆ瀽瀹堝崼)瀵艰埅纭afterEach(鍏ㄥ眬post-hook)瑙﹀彂DOM鏇存柊銆俠eforeRouteEnter锛堝湪guard涓皟鐢ㄤ紶閫掔粰next鐨勫洖璋冨嚱鏁帮紝鍒涘缓鐨勭粍浠跺疄渚嬩細浣滀负鍥炶皟鍑芥暟鐨勫弬鏁颁紶鍏ャ€俷ext(vm)=>{}锛夌劧鍚庤皟鐢╟reated锛宮ounted绛夈€傪煂圭户缁洿鏂帮紝鍏虫敞鎴戯紝浣犱細鍙戠幇涓€涓敤蹇冪殑鍓嶇瀹濔煒婏紝璁╂垜浠竴璧峰涔犳垚闀裤€傪煄夊枩娆㈢殑鏈嬪弸璁板緱鐐硅禐鍏虫敞鏀惰棌锛岀湅瀹屼笉浼氳糠璺煒夝煄佹杩庡ぇ瀹惰瘎璁轰氦娴侊紝锜硅煿馃槉
