vuerouter帶參數(shù)頁面刷新或回退參數(shù)消失怎么辦-創(chuàng)新互聯(lián)
這篇文章主要介紹vue router帶參數(shù)頁面刷新或回退參數(shù)消失怎么辦，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
成都創(chuàng)新互聯(lián)公司企業(yè)建站,10余年網(wǎng)站建設(shè)經(jīng)驗，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁設(shè)計，有多年建站和網(wǎng)站代運營經(jīng)驗，設(shè)計師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對于成都做網(wǎng)站、網(wǎng)站制作中不同領(lǐng)域進行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動的思維在網(wǎng)頁中充分展現(xiàn)，通過對客戶行業(yè)精準(zhǔn)市場調(diào)研，為客戶提供的解決方案。
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ù)名對應(yīng)。使用query方法，就沒有這種限制，直接在跳轉(zhuǎn)里面用就可以。
注意：如果路由上面不寫參數(shù)，也是可以傳過去的，但不會在url上面顯示出你的參數(shù)，并且當(dāng)你跳到別的頁面或者刷新頁面的時候參數(shù)會丟失（如下圖所示），那依賴這個參數(shù)的http請求或者其他操作就會失敗。
注意看上面的路由參數(shù)，id這個參數(shù)是我們有設(shè)置在路由上面的，id2我沒有設(shè)置在路由里面，所以刷新之后id2就不見了，在項目中，我們總不可能要求用戶不能刷新吧。
組件1：
從這個路由傳參到別的路由
router-link跳轉(zhuǎn)router1
編程式導(dǎo)航跳轉(zhuǎn)：
上面的router-link傳參，也可以使用router文檔里面的編程式導(dǎo)航來跳轉(zhuǎn)傳參。
this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }});
//編程跳轉(zhuǎn)寫在一個函數(shù)里面，通過click等方法來觸發(fā)這兩種傳參效果是一模一樣的，編程式導(dǎo)航，可以用來做判斷跳轉(zhuǎn)，比如是否授權(quán)，是否登錄，等等狀態(tài)，對此不太了解的小伙伴們，可以跳過這個編程式導(dǎo)航，以后再來看。
組件2：
接收參數(shù)的路由
params.id：{{ $route.params }}
query.status:{{ $route.query.queryId }}
傳參還是比較簡單的，按著上面組件的使用方法就可以成功傳過去了。
提示：獲取路由上面的參數(shù)，用的是$route，后面沒有r。
params傳參和query傳參有什么區(qū)別：
1、params是路由的一部分,必須要有。query是拼接在url后面的參數(shù)，沒有也沒關(guān)系。
params一旦設(shè)置在路由，params就是路由的一部分，如果這個路由有params傳參，但是在跳轉(zhuǎn)的時候沒有傳這個參數(shù)，會導(dǎo)致跳轉(zhuǎn)失敗或者頁面會沒有內(nèi)容。
比如：跳轉(zhuǎn)/router1/:id
正確
錯誤
2、params、query不設(shè)置也可以傳參，但是params不設(shè)置的時候，刷新頁面或者返回參數(shù)會丟失，query并不會出現(xiàn)這種情況，這一點的在上面說過了
作者原話：首先我針對刷新參數(shù)消失想到的方法是在剛開始的時候?qū)?shù)存到localStorage里面，但是如果這種傳參比較多的話可能存儲的地方會有點多；
然后再看一些博客的時候提到用vue 的，即在外套一層實現(xiàn)頁面緩存，但是這樣確實是不是每一個頁面都需要緩存的特別是一些狀態(tài)之間切換需要流程化更改狀態(tài)的頁面，寫上這個就不能實現(xiàn)數(shù)據(jù)的實時刷新了
以上是“vue router帶參數(shù)頁面刷新或回退參數(shù)消失怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章標(biāo)題：vuerouter帶參數(shù)頁面刷新或回退參數(shù)消失怎么辦-創(chuàng)新互聯(lián)
文章出自：
http://weahome.cn/article/igjcj.html
重慶分公司
重慶分公司
