vue-router query和params傳參(接收參數)$router $route的區(qū)別

testHs 發(fā)布于2019-08-21 18:41 / 1123人閱讀

今天做項目時踩到了vue-router傳參的坑（query和params），所以決定總結一下二者的區(qū)別。 直接總結干貨！！！ 1.query方式傳參和接收參數

傳參: 
this.$router.push({
        path:"/xxx",
        query:{
          id:id
        }
      })
  
接收參數:
this.$route.query.id

注意:傳參是this.$router,接收參數是this.$route,這里千萬要看清了！！！

this.$router 和this.$route有何區(qū)別？
在控制臺打印兩者可以很明顯的看出兩者的一些區(qū)別：

1.$router為VueRouter實例，想要導航到不同URL，則使用$router.push方法

2.$route為當前router跳轉對象，里面可以獲取name、path、query、params等

2.params方式傳參和接收參數

傳參: 
this.$router.push({
        name:"xxx",
        params:{
          id:id
        }
      })
  
接收參數:
this.$route.params.id

注意:params傳參，push里面只能是 name:"xxxx",不能是path:"/xxx",因為params只能用name來引入路由，如果這里寫成了path，接收參數頁面會是undefined！！！

另外，二者還有點區(qū)別，直白的來說query相當于get請求，頁面跳轉的時候，可以在地址欄看到請求參數，而params相當于post請求，參數不會再地址欄中顯示

vue的自學之路還得繼續(xù)走，坑還會繼續(xù)踩，下一個坑會是神馬...

云服務器 GPU云服務器 vue-router url query參數接收傳入參數 python接收參數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90714.html

從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

tommego 2019-08-23 12:55 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

jhhfft 2019-08-02 11:56 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

frontoldman 2019-08-29 17:11 評論0 收藏0
vue常用操作及學習筆記（路由跳轉及路由傳參篇）

摘要：也可以從其他文件進來定義路由每個路由應該映射一個組件。其中可以是通過創(chuàng)建的組件構造器，或者，只是一個組件配置對象。路由跳轉 - 超鏈接方式跳轉 html： Hello App! Go to Foo Go to Bar router.js...

megatron 2019-08-23 11:27 評論0 收藏0
vue-router 基礎知識點

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。模式的原理是事件監(jiān)測值變化，可以在對象上監(jiān)聽這個事件。這兩個方法應用于瀏覽器記錄棧，在當前已有的基礎之上，它們提供了對歷史記錄修改的功能。 vue-router 這里的路由并不是指我們平時所說的硬件路由器，這里的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是WebApp的鏈接路徑管理系統(tǒng)。vue-router是...

ningwang 2019-08-26 10:41 評論0 收藏0