浣犳湁娌℃湁鍙戠幇锛屼綘鍦ㄤ娇鐢≧eact/Vue鐨勬椂鍊欙紝鎬绘湁涓€鏉″皬灏惧反锛岃蛋鍒板摢閲岄兘瑕佸甫鐫€瀹冿紝閭ｅ氨鏄痳eact-router/Vue-router锛屼互鍙婂熀浜庝粬浠殑绗笁鏂规鏋讹紝鏈夊緢澶氫釜鎬у寲鐨勭害瀹氬拰鎵╁睍锛屾瘮濡俷uxtjs/nextjs/umijs閮芥帹鍑轰簡鑷繁鐨勮矾鐢辨柟妗堛€傛湁娌℃湁鎯宠繃浣犵湡鐨勫彲浠ュ畬鍏ㄦ憜鑴卞畠浠紵鑰屼笖涔熶笉澶嶆潅锛屼笅闈㈡垜鏉ュ垎鏋愬垎鏋愪竴涓嬶細State鍙互鎺у埗鎵€鏈夌殑UI銆傞鍏堬紝React/Vue鏄熀浜嶮VVM鏋舵瀯鐨勩€係tate鍙互鍒ゆ柇Component鏄惁鏄剧ず锛屽緢绠€鍗曪細//jsx{show?:null}//vue涔熷彲浠ユ牴鎹姸鎬佸姩鎬佹樉绀虹粍浠讹細鎺у埗鏂瑰紡鏈夊緢澶氱UI锛屾垜灏变笉涓句緥浜嗭紝绠€鑰岃█涔嬶紝State灏辨槸鎺у埗UI鐨勫ぇ鑴戜腑鏋€俇RL鏄犲皠鍒癝tate璺敱鐨勪綔鐢ㄦ棤闈炲氨鏄牴鎹甎rl鎺у埗UI鐨勬樉绀猴紝閭ｄ箞浣犲彧闇€瑕佸皢Url鏄犲皠鍒癝tate锛屼笉灏辨槸鐩殑鍚楋紵url涓昏鍒嗕负涓ら儴鍒嗭紝pathname鍜宷uery銆傛湁寰堝绗笁鏂瑰簱鎻愪緵浜嗚В鏋愬畠浠殑鏂规硶锛屾瘮濡傦細璺緞鍚嶈В鏋愶細path-to-regexp:constregexp=pathToRegexp("/:foo/:bar");regexp.exec("/test/route");鍏蜂綋鐢ㄦ硶鐪嬪畼鏂规枃妗ｅ氨鍙互浜嗭紝寰堢畝鍗曘€傘€傘€傛煡璇㈠垎鏋愶細鏌ヨ鍏跺疄寰堢伒娲伙紝娌℃湁瑕佹眰浣跨敤浠€涔堟牸寮忥紝鏈€绠€鍗曠殑鏂规硶灏辨槸鐩存帴浣跨敤JSON.stringify搴忓垪鍖栧瓧绗︿覆涔熷彲浠ョ敤浣滄煡璇€傚鏋滄兂鎸夌収閫氱敤鐨勬牸寮忥紝鍙互浣跨敤锛歲uery-string鎴栬€卶squeryString.parse(location.search)濂戒簡锛岀幇鍦ㄨВ鏋怳rl鍚庡氨鍙互鎷垮埌鏁版嵁浜嗭紝鐒跺悗Convert鎴愯嚜宸辨兂瑕佺殑State瀛樺偍璧锋潵鍦ㄥ叏鐞冨晢搴椼€傛瘮濡備綘瀹氫箟涓€涓猆rl:/member/list/3?uname=lily//鎻愬彇璺敱淇℃伅getRouteParams():RouteParams{constquery=queryString.parse(location.search);const[,curModule='',curView='',id='']=pathToRegexp('/:curModule/:curView/:id').exec(location.pathname)||[];if(curView==='list'){//濡傛灉鏄垪琛紝id琛ㄧず褰撳墠椤电爜return{...query,pageCurrent:id,curView}}elseif(curView==='detail'){return{...query,id,curView}}}骞跺湪UI涓幏鍙栬繖浜涚姸鎬侊紙閫氳繃Redux鎴朧uex锛夛細constComponent=({curView})=>{return(<>{curView==='list'&&
}{curView==='detail'&&});};鍩轰簬pushState鍜宺eplaceState鍙戣捣璺敱璺宠浆锛屽皝瑁呭嵆鍙細window.history.pushState(null,'',url);window.history.replaceState(null,'',url);constLink=({url,action,...props})=>{constonClick=(event:MouseEvent)=>{event.preventDefault();window.history[`${action}State`](null,'',url);}return;}鍙惉璺敱鍙樺寲锛岀洃鍚琾opstate浜嬩欢锛歸indow.addEventListener('popstate',()=>{//鍒嗘瀽Url骞舵洿鏂板晢搴?/...});鎵嬫憞鐨勫ソ澶勬槸UI娓叉煋鏇寸函绮癸紝UI鐨勭敓姝诲ぇ鏉冪墷鐗㈡帉鎻″湪State鎵嬩腑锛孶I=render(state)锛岃矾鐢辩瓑鍥犵礌琚鍥撮樆闅旓紝浣滀负sideeffect褰卞搷State锛岀伒娲绘€ф洿楂橈紝鍙互鎶奤RL鏄犲皠鍒颁换鎰廠tate锛屼粠鑰屾帶鍒禨tate鑳芥帶鍒剁殑浠讳綍涓滆タ锛屾瘮濡傜敤Url鎺у埗鏌愪釜鎸夐挳鐨勫紑鍚拰鍏抽棴锛屽脊绐楀拰鍏抽棴寮瑰嚭绐楀彛绛夈€備笉渚濊禆鍚勭绗笁鏂规鏋讹紝涓嶉渶瑕佸涔狅紝涓嶅彈鍏舵潫缂氥€俇I鍜孯outer涔嬮棿娌℃湁鐩存帴缁戝畾锛岃€屾槸閫氳繃State鏄犲皠锛屼篃灏辨槸璇村鏋滀骇鍝佷紭鍖栨垨鑰呰矾鐢辨牸寮忔敼鍙橈紝鍙細鏀瑰彉mapping锛屼笉浼氭敼鍙榁iew鍜孲tate锛屾洿鍔犳澗鏁ｃ€備互涓婂彧鏄疄闄呮渚嬬殑澶ф鎬濊矾銆傚鏋滅湡鐨勬柟渚夸娇鐢ㄧ殑璇濓紝鏈変簺缁嗚妭杩樻槸瑕佸皝瑁呭拰淇敼鐨勩€傝繖閲屾湁涓€涓嚜宸辩殑寮€婧愰」鐩緵澶у鍙傝€冦€傚湪绾块瑙堬細http://admin-react-antd銆俥luxj...鏈」鐩病鏈変娇鐢ㄧ涓夋柟Router妗嗘灦锛屽叏閮ㄨ嚜宸辩敤鎰熻涓嶉敊...馃槀馃槀馃槀React鐗坓ithub锛歨ttps://github.com/hiisea/elu...gitee:https://gitee.com/hiisea/elux...Vue鐗坓ithub:https://github.com/hiisea/elu...gitee:https://gitee.com/hiisea/elux...鍙﹀锛屾妸杩欑鎵嬫粴鏈哄埗鍜孌ialog寮傛兂澶╁紑鐨勭粨鍚堣捣鏉ワ紝涓€涓鍣ㄥ氨璇炵敓浜嗭細virtualWindow銆傚彲浠ユ煡鐪嬫垜鐨勫彟涓€绡囨枃绔狅細銆愪笉鎯冲仛Window鐨凞ialog涓嶆槸濂界殑Modal銆傚脊绐楃炕鈥︹€︺€?/p>
