這篇文章主要介紹vue router帶參數(shù)頁(yè)面刷新或回退參數(shù)消失怎么辦，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比舞鋼網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式舞鋼網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋舞鋼地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴(lài)。

Vue router如何傳參

params、query是什么？

params：/router1/:id ，/router1/123，/router1/789 ,這里的id叫做params

query：/router1?id=123 ,/router1?id=456 ,這里的id叫做query。

路由界面：

router.js:

路由設(shè)置這里，當(dāng)你使用params方法傳參的時(shí)候，要在路由后面加參數(shù)名，并且傳參的時(shí)候，參數(shù)名要跟路由后面設(shè)置的參數(shù)名對(duì)應(yīng)。使用query方法，就沒(méi)有這種限制，直接在跳轉(zhuǎn)里面用就可以。

注意：如果路由上面不寫(xiě)參數(shù)，也是可以傳過(guò)去的，但不會(huì)在url上面顯示出你的參數(shù)，并且當(dāng)你跳到別的頁(yè)面或者刷新頁(yè)面的時(shí)候參數(shù)會(huì)丟失（如下圖所示），那依賴(lài)這個(gè)參數(shù)的http請(qǐng)求或者其他操作就會(huì)失敗。

注意看上面的路由參數(shù)，id這個(gè)參數(shù)是我們有設(shè)置在路由上面的，id2我沒(méi)有設(shè)置在路由里面，所以刷新之后id2就不見(jiàn)了，在項(xiàng)目中，我們總不可能要求用戶(hù)不能刷新吧。

組件1：

<template>
 <div class="app_page">
  <h2>從這個(gè)路由傳參到別的路由</h2>
  <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}" >
   router-link跳轉(zhuǎn)router1
  </router-link>
 </div>
</template>
<script>
export default {
 name: 'app_page',
 data () {
  return {
   status:110,
   status2:120,
   status3:119
  }
 },
}
</script>

編程式導(dǎo)航跳轉(zhuǎn)：

上面的router-link傳參，也可以使用router文檔里面的編程式導(dǎo)航來(lái)跳轉(zhuǎn)傳參。

this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }});
//編程跳轉(zhuǎn)寫(xiě)在一個(gè)函數(shù)里面，通過(guò)click等方法來(lái)觸發(fā)

這兩種傳參效果是一模一樣的，編程式導(dǎo)航，可以用來(lái)做判斷跳轉(zhuǎn)，比如是否授權(quán)，是否登錄，等等狀態(tài)，對(duì)此不太了解的小伙伴們，可以跳過(guò)這個(gè)編程式導(dǎo)航，以后再來(lái)看。

組件2：

<template>
 <div class="router1">
  <h2>接收參數(shù)的路由</h2>
  <h2> params.id：{{ $route.params }}</h2>
  <h2>query.status:{{ $route.query.queryId }}</h2>
  <keep-alive>
   <router-view></router-view>
  </keep-alive>
 </div>
</template>

傳參還是比較簡(jiǎn)單的，按著上面組件的使用方法就可以成功傳過(guò)去了。

提示：獲取路由上面的參數(shù)，用的是$route，后面沒(méi)有r。

params傳參和query傳參有什么區(qū)別：

1、params是路由的一部分,必須要有。query是拼接在url后面的參數(shù)，沒(méi)有也沒(méi)關(guān)系。

params一旦設(shè)置在路由，params就是路由的一部分，如果這個(gè)路由有params傳參，但是在跳轉(zhuǎn)的時(shí)候沒(méi)有傳這個(gè)參數(shù)，會(huì)導(dǎo)致跳轉(zhuǎn)失敗或者頁(yè)面會(huì)沒(méi)有內(nèi)容。

比如：跳轉(zhuǎn)/router1/:id

 <router-link :to="{ name:'router1',params: { id: status}}" >正確</router-link>
<router-link :to="{ name:'router1',params: { id2: status}}">錯(cuò)誤</router-link>

2、params、query不設(shè)置也可以傳參，但是params不設(shè)置的時(shí)候，刷新頁(yè)面或者返回參數(shù)會(huì)丟失，query并不會(huì)出現(xiàn)這種情況，這一點(diǎn)的在上面說(shuō)過(guò)了

作者原話：首先我針對(duì)刷新參數(shù)消失想到的方法是在剛開(kāi)始的時(shí)候?qū)?shù)存到localStorage里面，但是如果這種傳參比較多的話可能存儲(chǔ)的地方會(huì)有點(diǎn)多；

然后再看一些博客的時(shí)候提到用vue 的<keep-alive>，即在<router-view>外套一層<keep-alive>實(shí)現(xiàn)頁(yè)面緩存，但是這樣確實(shí)是不是每一個(gè)頁(yè)面都需要緩存的特別是一些狀態(tài)之間切換需要流程化更改狀態(tài)的頁(yè)面，寫(xiě)上這個(gè)就不能實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)刷新了

以上是“vue router帶參數(shù)頁(yè)面刷新或回退參數(shù)消失怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：vuerouter帶參數(shù)頁(yè)面刷新或回退參數(shù)消失怎么辦
網(wǎng)站URL：http://chinadenli.net/article36/gjsjsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站營(yíng)銷(xiāo)、軟件開(kāi)發(fā)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)