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