Vue路由傳參的兩種方式query和params怎么使用

這篇文章主要介紹“Vue路由傳參的兩種方式query和params怎么使用”，在日常操作中，相信很多人在Vue路由傳參的兩種方式query和params怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue路由傳參的兩種方式query和params怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

Vue路由傳參的兩種方式query和params

一、router-link

1. 不帶參數
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建議用name  
// 注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當前路由開始。
2.帶參數
<router-link :to="{name:'home', params: {id:1}}">  
// params傳參數 (類似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參  $route.params.id
// script 取參  this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}"> 
// query傳參數 (類似get,url后面會顯示參數)
// 路由可不配置
// html 取參  $route.query.id
// script 取參  this.$route.query.id

二、 this.$router.push()

1.  不帶參數
  
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query傳參 
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取參  $route.query.id
// script 取參  this.$route.query.id
3. params傳參
 
this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
  
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
  
// html 取參  $route.params.id
// script 取參  this.$route.params.id

三、 this.$router.replace() (用法同上,push)

四、query和params區別與總結：

• query相當于GET請求，頁面跳轉的時候，可以在地址欄看到請求參數

• params相當于POST請求，參數不會在地址欄中顯示

• query類似 get, 跳轉之后頁面 url后面會拼接參數,類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁面id還在

• params類似 post, 跳轉之后頁面 url后面不會拼接參數 , 但是刷新頁面id 會消失

到此，關于“Vue路由傳參的兩種方式query和params怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！