《后端小伙伴快来学前端》Vue-Router路由各种跳转、传参小知识

时间：2023-04-01 10:31:40 vue.js

鍓嶈█瀛﹀畬Vuex鐨勬搷浣滐紝鏄椂鍊欏涔燰ue涓殑璺敱鎿嶄綔浜?...xdm棣栧厛瀹夎vue-cli锛屽畨瑁卾ueaddrouter锛岃繖涓€姝ュ熀鏈幆澧冩惌寤哄畬鎴愩€傞」鐩腑浼氬鍑轰竴涓枃浠跺す锛屽唴瀹瑰涓嬶細鏈€鍚庢毚闇插嚭鏉ワ紝鍙互鍦╩ian.js涓紩鐢ㄣ€傛殏涓斾笉缁嗚銆?.鍩烘湰璺敱浣跨敤鍩烘湰璺敱銆備簨瀹炰笂锛屼綘鍦ㄥ畨瑁呬箣鍚庡凡缁忔湁浜嗕竴涓緥瀛愩€傚湪App缁勪欢涓紝鏈夊涓嬩袱琛屼唬鐮侊紝鍏跺疄鏄矾鐢辫烦杞殑鎰忔€濄€?router-linkto="/">Home|鍏充簬|鎴戜滑浠ュ墠鐢ㄧ殑鏄痶ag锛岃繖閲屽彧鏄负浜嗗府鍔╂垜浠皝瑁呫€傝繖閲岄厤缃殑/鍜?about灏辨槸router鏂囦欢澶逛笅閰嶇疆鐨勮矾鐢辫鍒欙紝姣忎釜璺緞瀵瑰簲鍝釜缁勪欢銆傛晥鏋滃涓嬶細鐐瑰嚮璺宠浆銆傝繖涓槸鏈€鍩烘湰鐨勶紝闅忎究鐪嬬湅锛屽洜涓烘垜浠緢灏戠敤杩欑鏂规硶锛屽熀鏈笂鎴戜滑鍦ㄨ矾鐢辫烦杞殑杩囩▼涓鍋氬緢澶氫簨鎯呫€備絾鏄ぇ瀹舵湁娌℃湁鍙戠幇锛屽彧鏄唴瀹瑰彉浜嗭紝涓轰粈涔堝憿锛熷洜涓篴pp缁勪欢涓殑浠ｇ爜锛屾剰鎬濇槸鍒囨崲璺敱鏃讹紝鍦ㄨ繖閲屾樉绀虹粍浠跺唴瀹广€傝繖鏄渶鍩烘湰鐨勶紝澶у闅忎究鍋氾紝涓嶈浜嗐€備竴涓畝鍗曠殑闂锛屽摢浜涘師濮嬬粍浠跺湪璺敱璺宠浆杩囩▼涓闅愯棌鎴栫牬鍧忎簡锛燂紵锛?銆佸祵濂楄矾鐢憋紙matryoshka锛夋晥鏋滃浘锛氬緢瀹规槗鍦╤ome鍜宎bout涓嬪垎鍒湁涓€涓矾鐢便€傝鎴戜滑鍏堟坊鍔犱袱涓粍浠讹紝鐒跺悗鍦ㄨ矾鐢卞櫒涓厤缃畠浠€俢onstroutes=[{path:'/',name:'Home',component:Home,children:[{path:'/message',name:'message',component:()=>import(/*webpackChunkName:"about"*/'../components/Message.vue'),}]},{path:'/about',name:'About',component:()=>import(/*webpackChunkName:"about"*/'../views/About.vue'),children:[{path:'/news',name:'news',component:()=>import(/*webpackChunkName:"about"*/'../components/News.vue'),},]}]鍏垛€嬧€嬪疄杩樻秹鍙奵hildren杩欎釜灞炴€э紝灏辨槸鍜屼笂绾ц矾鐢卞舰鎴愮埗瀛愬叧绯汇€傝繖鏍蜂竴鍏辨槸涓ゅ濞冨▋锛屾墍浠ヤ笉绠℃湁澶氬皯濂楋紝闅忎究鍐欒繘鍘诲氨瀹屼簡銆備縿缃楁柉濂楀▋鏇剧粡寰堥叿锛屽祵濂楀▋濞冩€绘槸寰堥叿銆傚洓銆佽矾鐢卞弬鏁颁紶閫掔殑鏁堟灉鎴戜滑娣诲姞涓€涓や釜瀛愯矾鐢辨潵瀹炵幇璺敱鍙傛暟浼犻€掋€傛澶栵紝鏇存敼鍘熷缁勪欢銆?.1.鍩虹鐜鎼缓MessageItem缁勪欢NewsItem缁勪欢exportdefault{data(){return{news:[{id:1,title:"001鏂伴椈"},{id:2,title:"002鏂伴椈"},{id:3,title:"003鏂伴椈"}]}}}娑堟伅缁?template>

{{message.id}}:{{message.title}}

4.2銆傜涓€绫绘煡璇㈠弬鏁帮細to鐨勫瓧绗︿覆鍐欐硶浣滀负URL鍙傛暟浼犻€掞紝缁勪欢浣跨敤$route.query鑾峰彇Message缁勪欢鐨勫€?liv-for="messageinmessages":key="message.id">{{message.id}}:{{message.title}}}娉ㄦ剰to鍓嶉潰鏄紩鍙凤紝涓棿鐨勫唴瀹逛篃鏄竴涓敤`symbols瑁呴グ鐨凪essageItem缁勪欢

Messagenumber:{{$route.璇㈤棶銆俰d}}

娑堟伅鏍囬锛歿{$route.query.title}}

鍏舵锛氬埌瀵硅薄鏂规硶

{{message.id}}:{{message.title}}瀵规柟鐨勬帴鏀舵柟寮忚繕鏄拰涓婇潰涓€鏍?.3.绗竴绫籶arams鍙傛暟锛歵o鐨勫瓧绗︿覆鍐欐硶涓庤烦杞摼鎺ョ被浼硷紝浣嗗繀椤诲湪璺敱瑙勫垯涓厤缃?router-link:to="`/item/${message.id}/${message.title}`">{{message.id}}:{{message.title}}{path:'/',name:'Home',component:Home,children:[{璺緞:'/message',name:'message',component:()=>import(/*webpackChunkName:"about"*/'../components/Message.vue'),children:[{path:'/item/:id/:title',//浣跨敤鍗犱綅绗﹀０鏄庢帴鏀秔arams鍙傛暟name:'messageItem',component:()=>import(/*webpackChunkName:"about"*/'../components/MessageItem.vue')}]}]}锛屾敹鍒扮殑娑堟伅鐣ユ湁鍙樺寲锛?p>娑堟伅缂栧彿锛歿{$route.params.id}}

娑堟伅鏍囬锛歿{$route.params.title}}

绗簩绉嶆柟娉曪細to鐨勫璞″啓娉?!--to鐨勫璞″啓娉?->{{message.id}}:{{message.title}}娉ㄦ剰锛氳繖閲屽繀椤讳娇鐢╪ame锛屽嵆閰嶇疆璺敱鐨勫悕绉般€傝矾鐢辫矾寰?.4鍜岃矾鐢眕rops閰嶇疆锛堝伔鎳掔殑濂藉伐鍏凤級涓嶈兘鐢ㄣ€傝鎴戜滑鎬濊€冧竴涓棶棰樸€傛偍鏄惁璁や负{{$route.params.id}}鎴杮{$route.params.title}}闈炲父閲嶅鍦拌幏鍙栬矾鐢变紶閫掔殑鍊硷紵锛燂紵瑕佽幏鍙栨瘡涓€硷紝鎮ㄥ繀椤诲啀娆＄紪鍐?route.params鎴栧墠缂€$this.query銆傛槸涓嶆槸瑙夊緱寰堥噸澶嶏紝閭ｄ箞鏈夋病鏈夋洿绠€鍗曠殑鍛紵锛堜竴浜岃繕鏄畝鍗曪紝涓囦竴璋ｈ█澶氫簡锛岃繖涓猵rops涓€瀹氬伔鎳掟煇ワ級1锛塒rops閰嶇疆鏂规硶涓€锛歿path:'/',name:'Home',component:Home,children:[{path:'/message',name:'message',component:()=>import(/*webpackChunkName:"about"*/'../components/Message.vue'),children:[{path:'/item/:id/:title',name:'messageItem',component:()=>import(/*webpackChunkName:"about"*/'../components/MessageItem.vue'),//绗竴绉嶆柟娉曪細props鍊间负甯冨皵鍊硷紝甯冨皵鍊间负true锛屽垯灏嗚矾鐢辨帴鏀跺埌鐨勬墍鏈塸arams鍙傛暟浼犻€掔粰MessageItem缁勪欢props:true}]}]}锛屼紶閫抪arams鍙傛暟鐨勭埗缁勪欢涓嶇敤鏀癸紝鎴戜滑鏀逛竴涓嬫帴鏀跺埌鐨勫瓙缁勪欢2)閬撳叿閰嶇疆鏂规硶浜岋細鎯充竴鎯筹紝涓婇潰鐨勬柟娉曞彧鑳借В鍐充紶閫抪arams鍙傛暟鏃剁殑缂╁啓锛岄偅濡傛灉鏄紶閫抭uery鍙傛暟鐨勬柟娉曞憿锛熼亾鍏烽厤缃叾瀹炲彲浠ユ敼鎴愪竴涓姛鑳姐€傛敞鎰忥細璁板緱缁冧範锛寋path:'/',name:'Home',component:Home,children:[{path:'/message',name:'message',component:()=>import(/*webpackChunkName:"about"*/'../components/Message.vue'),children:[{path:'/item',name:'messageItem',component:()=>import(/*webpackChunkName:"about"*/'../components/MessageItem.vue'),//props:true//绗簩绉嶅啓娉曪細props鐨勫€兼槸涓€涓嚱鏁帮紝鍑芥暟杩斿洖瀵硅薄涓殑姣忕粍key-value閮戒細浼犻€掔粰MessageItem缁勪欢props($route){return{id:$route.query.id,title:$route.query.title}}}]}]}锛屾兂鎺ユ敹浠€涔堬紝鎴戜滑鍐欏埌杩欓噷灏卞畬浜嬩簡銆傝鍒板瓙缁勪欢锛屾垜浠洿鎺ヤ娇鐢ㄨВ鏋勬柟娉昿rops({query}){return{id:query.id,title:query.title}}姣旇緝鎳掔殑鏄户缁В鏋勶細props({query:{id,title}}){return{id,title}}鐪熸槸鎳掑緱璁╀汉杩涙銆?.绋嬪簭鍖栬矾鐢?.1銆傜▼搴忓寲璺敱閲嶅畾鍚戜箣鍓嶆垜浠娇鐢?router-linkto="/news">news鏉ュ疄鐜拌矾鐢遍噸瀹氬悜锛屼絾鏄湪瀹為檯寮€鍙戜腑閫氳繃鐐瑰嚮鎸夐挳鎴栬€呰Е鍙戜竴浜涗簨浠讹紝鐒跺悗璺宠浆锛屽苟涓嶆槸鐗瑰埆閫傚悎浣跨敤router-link銆傛湁缂栫▼璺敱銆?liv-for="messageinmessages":key="message.id">{{message.id}}:{{message.title}}|鐐瑰嚮璺宠浆鍒皗{message.title}}椤甸潰浣跨敤鏂规硶璺宠浆methods:{showMessageItem(id,title){this.$router.push({path:'/item',query:{id:id,title:title}})}}濡傛灉鏄痯arams锛屽垯鍚屽墠;showPamarsMessageItem(id,title){this.$router.push({name:'messageItem',params:{id:id,title:title}})}鐩稿叧淇℃伅涔熻鏀癸紝璺敱涓厤缃殑props5.2銆佺▼搴忓寲鎺у埗鍓嶈繘鍚庨€€瀵逛簬娴忚鍣ㄤ腑鐨勫墠杩涘悗閫€鎸夐挳鎴戜滑涓€瀹氬緢鐔熸倝浜嗐€傚叾瀹炶繖涔熷彲浠ラ€氳繃缂栫▼鏉ュ疄鐜般€?template>杩斿洖|鍓嶈繘|go

涓婚〉|鍏充簬|

鍏跺疄鏄€氳繃$router涓婄殑api瀹炵幇鐨勶紝浣嗘槸濡傛灉鏄殣韬姸鎬侊紝杩樻槸鏃犳硶瀹炵幇锛屽洜涓鸿繖浜涘疄鐜拌繕鏄渶瑕佷緷璧栧巻鍙茶褰曠殑娴忚鍣ㄣ€傛晥鏋滃浘锛?.缂撳瓨璺敱缁勪欢鐨勪綔鐢細璁╂病鏈夋樉绀虹殑璺敱缁勪欢淇濇寔鎸傝浇锛屼笉琚攢姣併€傛垜浠湪MessageItem缁勪欢涓啓涓€涓猙eforeDestroy閽╁瓙鍑芥暟杩欎釜褰撴垜浠粠MessageItem缁勪欢鍒囨崲鍒板叾浠栭〉闈㈡椂浼氳鎵撳嵃鍑烘潵銆備絾鏄鏋滄垜浠湪浣跨敤浠栫殑鐖剁粍浠剁殑鏃跺€欐敼鎴愪笅闈㈣繖鏍枫€?keep-aliveinclude="MessageItem">娉ㄦ剰锛氱粍浠跺悕鍐欏湪include涓€傜粍浠跺悕绉般€傜粍浠跺悕绉般€傚鏋滀笉鍐檌nclude锛岄粯璁や細缂撳瓨锛屼笉浼氶攢姣併€傝繖鏍峰啓鍙互淇濊瘉MessageItem鍦ㄥ垏鎹㈣繃绋嬩腑涓嶄細琚攢姣併€傚鏋滃垏鎹㈠紓甯搁绻侊紝鎴戣寰楀姞杩欎釜杩樻槸鍙互鐨勩€?銆佷袱涓柊鐨勭敓鍛藉懆鏈熼挬瀛愬嚱鏁板湪绗叚鑺傦紝鎴戜滑鍙互缂撳瓨缁勪欢锛屼絾鍚屾椂锛屾苯杞︾粍浠剁殑beforeDestroy鐢熷懡鍛ㄦ湡閽╁瓙鍑芥暟浼氬け鏁堛€傞偅涔堜竴浜涙竻绌烘搷浣滃皢鏃犳硶杩涜锛堟瘮濡傚垏鎹㈣矾鐢憋紝璁╁畾鏃跺櫒鏆傚仠锛夛紝鎵€浠ヨ矾鐢辨湁涓や釜鐙壒鐨勭敓鍛藉懆鏈熼挬瀛愬嚱鏁般€俛ctivated褰撹矾鐢辩粍浠惰婵€娲绘椂瑙﹀彂銆傚綋鍋滅敤鐨勮矾鐢辩粍浠惰鍋滅敤鏃惰Е鍙戙€俛ctivated(){console.log('MessageItemhasbeenactivated')},deactivated(){console.log('MessageItemhasbeendeactivated')}涓嬮潰锛屽ぇ瀹朵竴璧峰姫鍔涘惂锛侊紒锛佹枃涓鏈変笉瓒充箣澶勶紝璇峰強鏃舵寚鍑猴紝鍦ㄦ琛ㄧず琛峰績鐨勬劅璋€傜焊涓婅皥鍏电殑鎴愭灉鎬绘槸鑲ゆ祬鐨勶紝鎴戠煡閬撹繖浠朵簨蹇呴』瑕佸仛銆傚ぇ瀹跺ソ锛屾垜鏄崥涓诲畞鍦ㄦ烦锛氫竴涓儹鐖辨枃鑹哄嵈璧颁笂缂栫▼閬撹矾鐨勯椤甸潚骞淬€傞潪甯告劅璋㈡偍鐨勫埌鏉ャ€?/p>