欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別

 更新時(shí)間:2018年08月03日 08:56:20   作者:賣女孩的小火柴  
今天做項(xiàng)目時(shí)踩到了vue-router傳參的坑(jquery和params),所以決定總結(jié)一下二者的區(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配置方式詳解

    這篇文章主要介紹了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à)的代碼示例

    關(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-06
  • mapbox gl開(kāi)箱即用的地圖引擎庫(kù)

    mapbox gl開(kāi)箱即用的地圖引擎庫(kù)

    這篇文章主要為大家介紹了一款mapbox gl開(kāi)箱即用的地圖引擎庫(kù),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • vite獲取所有環(huán)境變量(env)的實(shí)現(xiàn)方法

    vite獲取所有環(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-06
  • elementUI select組件使用及注意事項(xiàng)詳解

    elementUI select組件使用及注意事項(xiàng)詳解

    這篇文章主要介紹了elementUI select組件使用及注意事項(xiàng)詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-05-05
  • VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問(wèn)題

    VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問(wèn)題

    這篇文章主要介紹了VUE-PDF實(shí)現(xiàn)pdf在線預(yù)覽問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue-admin-element項(xiàng)目突然就起不來(lái)了的解決

    vue-admin-element項(xiàng)目突然就起不來(lái)了的解決

    這篇文章主要介紹了vue-admin-element項(xiàng)目突然就起不來(lái)了的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue Element前端應(yīng)用開(kāi)發(fā)之前端API接口的封裝

    Vue 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-05
  • vue中LocalStorage與SessionStorage的區(qū)別與用法

    vue中LocalStorage與SessionStorage的區(qū)別與用法

    本文主要介紹了LocalStorage和SessionStorage。LocalStorage和SessionStorage是兩種存儲(chǔ)方式,本文詳細(xì)的介紹一下區(qū)別以及用法,感興趣的可以了解一下
    2021-09-09
  • vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用

    vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用

    這篇文章主要介紹了vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-08-08

最新評(píng)論