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

二、 this.$router.push()

1.  不帶參數(shù)
  
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 ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失
// 配置path,刷新頁(yè)面id會(huì)保留
  
// html 取參  $route.params.id
// script 取參  this.$route.params.id

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

四、query和params區(qū)別與總結(jié)：

query相當(dāng)于GET請(qǐng)求，頁(yè)面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)
params相當(dāng)于POST請(qǐng)求，參數(shù)不會(huì)在地址欄中顯示
query類似 get, 跳轉(zhuǎn)之后頁(yè)面 url后面會(huì)拼接參數(shù),類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁(yè)面id還在
params類似 post, 跳轉(zhuǎn)之后頁(yè)面 url后面不會(huì)拼接參數(shù) , 但是刷新頁(yè)面id 會(huì)消失

到此這篇關(guān)于Vue路由傳參的兩種方式query和params的文章就介紹到這了,更多相關(guān)Vue路由傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: