淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項(xiàng)目時(shí)踩到了vue-router傳參的坑(jquery和params),所以決定總結(jié)一下二者的區(qū)別。
1.jquery方式傳參和接收參數(shù)
傳參:
this.$router.push({ path:'/xxx' query:{ id:id } })
接收參數(shù):
this.$route.query.id
注意:傳參是this.$router,接收參數(shù)是this.$route,這里千萬(wàn)要看清了!?。?/span>
this.$router 和this.$route有何區(qū)別?
在控制臺(tái)打印兩者可以很明顯的看出兩者的一些區(qū)別:
1.$router為VueRouter實(shí)例,想要導(dǎo)航到不同URL,則使用$router.push方法
2.$route為當(dāng)前router跳轉(zhuǎn)對(duì)象,里面可以獲取name、path、query、params等
2.params方式傳參和接收參數(shù)
傳參:
this.$router.push({ name:'xxx' params:{ id:id } })
接收參數(shù):
this.$route.params.id
注意:params傳參,push里面只能是 name:'xxxx',不能是path:'/xxx',因?yàn)閜arams只能用name來(lái)引入路由,如果這里寫(xiě)成了path,接收參數(shù)頁(yè)面會(huì)是undefined!??!
另外,二者還有點(diǎn)區(qū)別,直白的來(lái)說(shuō)query相當(dāng)于get請(qǐng)求,頁(yè)面跳轉(zhuǎn)的時(shí)候,可以在地址欄看到請(qǐng)求參數(shù),而params相當(dāng)于post請(qǐng)求,參數(shù)不會(huì)再地址欄中顯示。
總結(jié)
以上所述是小編給大家介紹的淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解
這篇文章主要介紹了vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12關(guān)于在vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)的代碼示例
Vue是一款流行的前端框架,支持過(guò)渡動(dòng)畫(huà)的實(shí)現(xiàn)是其中的一項(xiàng)重要特性,在Vue中,使用過(guò)渡動(dòng)畫(huà)可以為用戶提供更加友好的用戶體驗(yàn),下面我將為大家介紹一下子如何在Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà),需要的朋友可以參考下2023-06-06vite獲取所有環(huán)境變量(env)的實(shí)現(xiàn)方法
本文主要介紹了vite獲取所有環(huán)境變量(env)的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06elementUI select組件使用及注意事項(xiàng)詳解
這篇文章主要介紹了elementUI select組件使用及注意事項(xiàng)詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問(wèn)題
這篇文章主要介紹了VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue-admin-element項(xiàng)目突然就起不來(lái)了的解決
這篇文章主要介紹了vue-admin-element項(xiàng)目突然就起不來(lái)了的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue Element前端應(yīng)用開(kāi)發(fā)之前端API接口的封裝
對(duì)整個(gè)系統(tǒng)來(lái)說(shuō),一般會(huì)有很多業(yè)務(wù)對(duì)象,而每個(gè)業(yè)務(wù)對(duì)象的API接口又有很多。我們這個(gè)VUE+Element 前端應(yīng)用就是針對(duì)ABP框架的業(yè)務(wù)對(duì)象,因此前端的業(yè)務(wù)對(duì)象接口也是比較統(tǒng)一的,那么可以考慮在前端中對(duì)后端API接口調(diào)用進(jìn)行封裝,引入ES6的方式進(jìn)行前端API的抽象簡(jiǎn)化。2021-05-05vue中LocalStorage與SessionStorage的區(qū)別與用法
本文主要介紹了LocalStorage和SessionStorage。LocalStorage和SessionStorage是兩種存儲(chǔ)方式,本文詳細(xì)的介紹一下區(qū)別以及用法,感興趣的可以了解一下2021-09-09vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用
這篇文章主要介紹了vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08