---

鍔ㄦ€佽矾鐢辨暀绋嬶細鍏ラ棬涓庤繘闃讹紝鎺屾彙鐏垫椿鐨勫唴瀹圭鐞嗚壓鏈?/p>

瀵艰锛氳蛋杩涘姩鎬佽矾鐢辩殑濂囧涓栫晫锛岃В閿佺綉绔欎笌搴旂敤鐨勫叏鏂板唴瀹圭鐞嗘妧宸с€傛湰鏁欑▼灏嗗紩棰嗕綘浠庡熀纭€姒傚康鍑哄彂锛岄€愭鎺屾彙鍔ㄦ€佽矾鐢辩殑閰嶇疆姝ラ銆佸父瑙佹鏋跺簲鐢ㄤ笌浼樺寲鎶€宸э紝璁╀綘杞绘澗瀹炵幇瀹炴椂涓€у寲灞曠ず鍜岄珮鏁堝鑸€傝窡闅忔垜浠殑鎸囧崡锛屼粠璁剧疆璺敱鍣ㄦā鍧楀紑濮嬶紝鎺屾彙鍔ㄦ€佸弬鏁扮殑绮惧噯鍖归厤锛屼紭鍖栧姩鎬佽矾鐢辨€ц兘鐨勫叏杩囩▼锛屼负浣犵殑椤圭洰澧炴坊鏇村浜や簰鎬т笌鐢ㄦ埛鍙嬪ソ浣撻獙銆?/p>涓€銆佸姩鎬佽矾鐢卞熀纭€姒傚康

1. 鍔ㄦ€佽矾鐢卞垵鎺?/p>

鍔ㄦ€佽矾鐢憋紝杩欐槸涓€绉嶇濂囩殑缃戝潃鍙樻崲榄旀硶锛佸畠鍏佽鎴戜滑鍩轰簬鐢ㄦ埛杈撳叆鎴栦粠鏈嶅姟鍣ㄨ幏鍙栫殑鍙傛暟锛屽垱寤哄崈鍙樹竾鍖栫殑URL銆傝繖绉嶈矾鐢卞舰寮忎娇寰楃綉绔欐垨搴旂敤鑳藉鏍规嵁鍚勭鍙傛暟灞曠ず涓嶅悓鐨勫唴瀹癸紝鏋佸ぇ鍦颁赴瀵屼簡鐢ㄦ埛浣撻獙鍜屽唴瀹瑰鏍锋€с€?/p>

2. 鍔ㄦ€佽矾鐢变笌闈欐€佽矾鐢辩殑瀵规瘮

闈欐€佽矾鐢辨槸棰勫厛瀹氫箟濂界殑銆佸浐瀹氱殑URL璺緞锛岄€氬父涓庡凡鐭ュ唴瀹圭揣瀵嗙浉鍏炽€傝€屽姩鎬佽矾鐢卞垯鍍忔槸鎷ユ湁鏃犵┓鍙樺寲鐨勯瓟鏈锛岄€氳繃鏌ヨ鍙傛暟銆佽矾寰勪腑鐨勫彉閲忔垨鏄粠澶栭儴鏈嶅姟鑾峰彇鐨勬暟鎹潵鏋勫缓鍗冨彉涓囧寲鐨刄RL锛屼负鐢ㄦ埛甯︽潵鏇翠负鐏垫椿鐨勫唴瀹瑰睍绀哄拰瀵艰埅浣撻獙銆?/p>

閫傜敤鍦烘櫙鎻

鉁ㄥ唴瀹逛釜鎬у寲锛氭牴鎹敤鎴风殑鍋忓ソ銆佷綅缃瓑鍔ㄦ€佸弬鏁帮紝灞曠ず绗﹀悎鐢ㄦ埛闇€姹傜殑鍐呭銆?馃搳鏁版嵁椹卞姩瀵艰埅锛氬熀浜嶢PI杩斿洖鐨勬暟鎹紝鍔ㄦ€佹瀯寤哄鑸粨鏋勬垨鍐呭鍒楄〃銆傪煋︽ā鍧楀寲寮€鍙戯細鍦ㄥぇ鍨嬪簲鐢ㄤ腑锛岄€氳繃鍔ㄦ€佽矾鐢辨湁搴忕粍缁囧拰绠＄悊涓嶅悓鍔熻兘妯″潡鐨勫姞杞戒笌鏄剧ず銆?/p>浜屻€佸姩鎬佽矾鐢遍厤缃疄鎿?/h3>

姝ュ叆鍔ㄦ€佽矾鐢辩殑榄旀硶闃碉紝涓€璧疯缃矾鐢卞櫒妯″潡锛?/p>

浣犻渶瑕佸湪椤圭洰涓紩鍏ュ姩鎬佽矾鐢辩殑鐩稿叧搴撴垨妗嗘灦銆傝繖涓€姝ユ槸寮€鍚姩鎬佽矾鐢变箣鏃呯殑鍏抽敭銆傝窡闅忔垜浠殑鏁欑▼锛屽悗缁繕鏈夋洿澶氱簿褰╃瓑浣犳潵鎺㈢储鈥斺€斾粠鎺屾彙鍔ㄦ€佸弬鏁扮殑鍖归厤鎶€宸э紝鍒颁紭鍖栧姩鎬佽矾鐢辩殑鎬ц兘锛屼竴姝ユ鎴愪负鍔ㄦ€佽矾鐢辩殑楂樻墜锛?/p>

鎺ヤ笅鏉ョ殑绔犺妭灏嗕负浣犺缁嗚В璇绘瘡涓€涓楠ゅ拰鎶€宸э紝鍔╀綘杞绘澗椹鹃┉鍔ㄦ€佽矾鐢憋紝涓虹綉绔欐垨搴旂敤澧炴坊鏇村娲诲姏涓庨瓍鍔涳紒鎷洰浠ュ緟鍚э紒馃専 鍒涘缓涓庝娇鐢╒ue鐨勫姩鎬佽矾鐢辫鍒欙細涓嶄粎浠呮槸璺緞鍖归厤鐨勮壓鏈?/p> 涓€銆乂ue Router鐨勫畨瑁呬笌閰嶇疆

杩涘叆浣犵殑Vue椤圭洰鐩綍鍚庯紝棣栧厛闇€瑕佸畨瑁匳ue Router銆傛湁涓ょ甯哥敤鐨勫寘绠＄悊宸ュ叿鍙緵閫夋嫨锛歯pm鍜寉arn銆備綘鍙互閫氳繃浠ヤ笅鍛戒护杩涜瀹夎锛?/p>

```bash

浣跨敤npm

npm install vue-router

鎴栬€呬娇鐢▂arn

yarn add vue-router

```

鎺ヤ笅鏉ワ紝鍦ㄨ矾鐢辨枃浠讹紙濡俽outer.js鎴杛outer/index.js锛変腑瀹氫箟鍔ㄦ€佽矾鐢辫鍒欍€備竴涓畝鍗曠殑渚嬪瓙濡備笅锛?/p>

```javascript

const router = new VueRouter({

routes: [

{

path: '/product/:id', // 鍔ㄦ€佸弬鏁颁娇鐢ㄥ啋鍙锋爣璁?/p>

component: ProductDetail, // 瀵瑰簲缁勪欢

name: 'product', // 璺敱鍚嶇О锛屾柟渚垮紩鐢?/p>

props: true // 灏嗚矾鐢卞弬鏁颁綔涓簆rops浼犻€掔粰缁勪欢

},

// 鍏朵粬璺敱瑙勫垯...

]

});

```

鍦ㄤ笂闈㈢殑鍔ㄦ€佽矾鐢辫鍒欎腑锛宍:id`琛ㄧず涓€涓姩鎬佸弬鏁般€傚湪缁勪欢鍐呴儴锛屼綘鍙互閫氳繃`this.$route.params.id`鑾峰彇杩欎釜璺敱鍙傛暟銆備緥濡傦細

```javascript

export default {

created() {

console.log(this.$route.params.id); // 杈撳嚭鍔ㄦ€佸弬鏁板€?/p>

}

}

```

杩欐牱锛屽綋鐢ㄦ埛鍦ㄦ祻瑙堝櫒璁块棶濡俙/product/123`杩欐牱鐨勯摼鎺ユ椂锛岀粍浠惰兘澶熸帴鏀跺埌`id`鍙傛暟骞跺湪鎺у埗鍙版墦鍗板嚭鏉ャ€傚悓鏃朵綘涔熷彲浠ヤ娇鐢ㄨ繖涓弬鏁版潵鍔ㄦ€佸湴鏀瑰彉缁勪欢鐨勮涓烘垨灞曠ず鍐呭銆?/p>

涓夈€丷eact Router鐨勫姩鎬佽矾鐢变粙缁嶄笌閰嶇疆浼樺寲鎶€宸у垎浜?/p>

React Router鐨勫姩鎬佽矾鐢遍厤缃悓鏍风洿瑙傛槗鐢ㄣ€傚畨瑁匯eact Router鍚庯紝鍙互浣跨敤濡備笅鏂瑰紡閰嶇疆鍔ㄦ€佽矾鐢憋細瀹夎鍛戒护涓庝娇鐢╒ue Router绫讳技銆傜劧鍚庯紝浣犲彲浠ヨ繖鏍烽厤缃姩鎬佽矾鐢辫鍒欙細浣跨敤缁勪欢鐨刞path`鍜宍params`灞炴€ф潵瀹氫箟鍔ㄦ€侀儴鍒嗐€傚湪缁勪欢鍐呴儴锛岄€氳繃`this.props.match.params`鏉ヨ闂姩鎬佸弬鏁般€備緥濡傦細React椤圭洰涓彲浠ヨ繖鏍烽厤缃拰浣跨敤鍔ㄦ€佽矾鐢便€傚叧浜嶳eact Router鐨勪紭鍖栨妧宸э紝閲嶇偣鍦ㄤ簬閬垮厤璺敱閲嶅鍜屾寰幆闂锛岀‘淇濊矾鐢辩殑鍞竴鎬э紝鍚堢悊璁捐璺敱灞傛缁撴瀯绛夈€傛敞鎰忓弬鏁扮鐞嗗拰鎬ц兘浼樺寲绛栫暐锛屽鎳掑姞杞藉拰闈欐€佽祫婧愮紦瀛樼瓑銆傝繖浜涙妧宸у彲浠ュ府鍔╀綘鏋勫缓楂樻晥涓旀槗浜庣淮鎶ょ殑鍔ㄦ€佽矾鐢辩郴缁熴€?鍥涖€佹祴璇曚笌楠岃瘉鍔ㄦ€佽矾鐢卞姛鑳藉湪瀹為檯搴旂敤涓坊鍔犻摼鎺ユ垨浣跨敤Vue Router鐨刲ink缁勪欢鍚庯紝浣犲彲浠ラ€氳繃娴忚鍣ㄨ闂姩鎬佽矾鐢遍摼鎺ユ潵娴嬭瘯鍔ㄦ€佽矾鐢卞姛鑳芥槸鍚︽甯稿伐浣溿€傜‘淇濆湪娴嬭瘯杩囩▼涓鐩栨墍鏈夊彲鑳界殑鍔ㄦ€佽矾鐢卞満鏅紝鍖呮嫭涓嶅悓鍙傛暟鍊肩殑浼犲叆鍜岀粍浠跺搷搴旂殑楠岃瘉绛夈€備篃瑕佹敞鎰忔祴璇曠敤鎴峰弸濂界殑閿欒澶勭悊鏈哄埗锛屼互纭繚鍦ㄥ紓甯告儏鍐靛彂鐢熸椂鑳藉缁欏嚭鎭板綋鐨勫弽棣堛€傞€氳繃杩欎簺娴嬭瘯楠岃瘉锛屼綘鍙互纭繚鍔ㄦ€佽矾鐢卞姛鑳界殑绋冲畾鎬у拰鍙潬鎬с€?浜斻€佹€荤粨涓庡睍鏈涙垜浠簡瑙ｄ簡濡備綍鍦╒ue鍜孯eact椤圭洰涓垱寤哄拰浣跨敤鍔ㄦ€佽矾鐢辫鍒欍€傛垜浠涔犱簡濡備綍瀹夎鍜岄厤缃甐ue Router鍜孯eact Router锛屽疄鐜颁簡鍔ㄦ€佸弬鏁板尮閰嶅拰浣跨敤锛屽苟鎺㈣浜嗗姩鎬佽矾鐢辩殑浼樺寲鎶€宸с€傚湪瀹為檯搴旂敤涓紝鎴戜滑杩橀渶瑕佷笉鏂涔犲拰鎺㈢储鏇村鐨勬渶浣冲疄璺靛拰鎶€鏈洿鏂帮紝浠ュ簲瀵逛笉鏂彉鍖栫殑闇€姹傚拰鎶€鏈彂灞曘€傚笇鏈涙湰鏂囪兘涓轰綘寮€鍚姩鎬佽矾鐢辩殑濂囧涔嬫梾鎻愪緵鏈夌泭鐨勬寚瀵笺€俈. 鍔ㄦ€佸崥瀹㈢郴缁熷疄鎴樻渚嬭В鏋?/p>

椤圭洰姒傝堪锛氭瀯寤哄姩鎬佸崥瀹㈢郴缁?/p>

璁炬兂鎴戜滑鐫€鎵嬫墦閫犱竴涓氦浜掑紡鍗氬骞冲彴锛屽叾涓瘡涓€绡囧崥瀹㈤兘鏄€氳繃鍔ㄦ€佽矾鐢辩殑褰㈠紡杩涜灞曠ず銆傞偅涔堬紝杩欎竴杩囩▼鏄浣曡繍浣滅殑鍛紵璁╂垜浠繁鍏ユ帰绌躲€?/p>涓€銆佽矾鐢遍厤缃殑鑹烘湳

鍦ㄦ瀯寤哄姩鎬佸崥瀹㈢郴缁熸椂锛屾垜浠鍏堥渶瑕佸璺敱杩涜鍚堢悊閰嶇疆銆備互涓嬫槸涓€涓畝鍗曠殑閰嶇疆绀轰緥锛?/p>

褰撶敤鎴峰湪娴忚鍣ㄤ腑杈撳叆鐗瑰畾鐨刄RL鏃讹紝渚嬪`/blog/鏌愮瘒鏂囩珷鐨勬爣棰樻垨slug`锛屾垜浠殑绯荤粺灏嗛€氳繃鍔ㄦ€佽矾鐢卞皢鐢ㄦ埛寮曞鑷冲搴旂殑鍗氬鏂囩珷椤甸潰銆傝繖鏍风殑閰嶇疆鍏佽鎴戜滑鐏垫椿鍦板睍绀哄唴瀹癸紝骞朵负寮€鍙戣€呭甫鏉ユ瀬澶х殑渚垮埄銆?/p>浜屻€佺粍浠剁殑榄呭姏

鎺ヤ笅鏉ワ紝鎴戜滑鏉ョ湅涓€涓猂eact涓殑缁勪欢瀹炵幇绀轰緥銆傞€氳繃缁勪欢锛屾垜浠彲浠ヨ交鏉惧湴灏嗗姩鎬佽矾鐢变笌鐣岄潰鍏冪礌鐩哥粨鍚堛€傚湪杩欎釜渚嬪瓙涓紝`BlogPost`缁勪欢浼氭牴鎹紶鍏ョ殑璺敱鍙傛暟锛堝鏂囩珷鏍囬鎴杝lug锛夋潵灞曠ず瀵瑰簲鐨勫崥瀹㈡枃绔犮€傝繖鏍风殑璁捐涓嶄粎绠€鍖栦簡瀵艰埅閫昏緫锛岃繕浣垮緱鍐呭灞曠ず鏇村姞涓€у寲銆?/p>涓夈€佸姩鎬佽矾鐢辩殑浼樺娍涓庢寫鎴?/h3>

鍔ㄦ€佽矾鐢变负鎴戜滑甯︽潵浜嗚澶氫紭鍔匡紝濡傛彁鍗囩敤鎴蜂綋楠屻€佹ā鍧楀寲寮€鍙戠瓑銆備笌姝ゆ垜浠篃闈复鐫€涓€浜涙寫鎴橈紝濡傛€ц兘浼樺寲鍜屽弬鏁扮鐞嗐€備负浜嗙‘淇濆姩鎬佽矾鐢辩殑楂樻晥杩愯锛屾垜浠渶瑕佸叧娉ㄨ矾鐢辫璁″拰鍔犺浇绛栫暐鐨勪紭鍖栵紝鍚屾椂纭繚鍙傛暟鐨勫畨鍏ㄦ€у拰鍚堢悊浣跨敤銆?/p>鍥涖€佸父瑙侀棶棰樼殑瑙ｈ涓庤В鍐?/h3>

鍦ㄥ疄闄呭簲鐢ㄤ腑锛屾垜浠彲鑳戒細閬囧埌涓€浜涗笌鍔ㄦ€佽矾鐢辩浉鍏崇殑闂锛屽404閿欒銆佺被鍨嬮敊璇互鍙婃€ц兘闂绛夈€傞拡瀵硅繖浜涢棶棰橈紝鎴戜滑鍙互閫氳繃妫€鏌ヨ矾鐢遍厤缃€佸弬鏁颁紶閫掍互鍙婄紦瀛樼瓥鐣ャ€佸垎椤典紭鍖栫瓑鏂归潰鏉ュ鎵捐В鍐虫柟妗堛€備负浜嗙‘淇濊矾鐢辩郴缁熺殑绋冲畾杩愯锛屾垜浠繕闇€瑕佹敞鎰忛伩鍏嶈矾鐢卞啿绐侊紝纭繚姣忔潯璺敱璺緞鐨勫敮涓€鎬э紝骞跺湪瀹㈡埛绔垨鏈嶅姟鍣ㄧ杩涜鍙傛暟鏍煎紡楠岃瘉銆?/p>

甯屾湜閫氳繃鏈枃鐨勬寚鍗楀拰绀轰緥锛屾偍鑳藉鍔ㄦ€佽矾鐢辨妧鏈湁鏇存繁鍏ョ殑鐞嗚В锛屽苟鑳藉皢鍏剁伒娲诲簲鐢ㄤ簬Web鎴栧簲鐢ㄥ紑鍙戜腑銆傚鏋滄偍鍦ㄥ疄闄呭紑鍙戣繃绋嬩腑閬囧埌浠讳綍闅鹃锛屼笉濡ㄥ弬鑰冪浉鍏虫枃妗ｆ垨鍦ㄧ嚎绀惧尯锛屼笌鍚岃浠叡鍚屼氦娴佸拰瀛︿範銆傚姩鎬佽矾鐢辩殑榄呭姏鍦ㄤ簬鍏剁伒娲绘€у拰涓€у寲锛岃鎴戜滑鍏卞悓鎺㈢储杩欎竴鎶€鏈殑鏇村鍙兘锛?/p>