VUE中路由變化this.$router(push\replace\go\back)解讀
更新時(shí)間：2023年10月24日 11:27:31 作者：前端不加班
這篇文章主要介紹了VUE中路由變化this.$router(push\replace\go\back),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
1.this.$router.push()
描述
跳轉(zhuǎn)到指定的url，但這個(gè)方法回向history添加一個(gè)記錄，點(diǎn)擊后退會(huì)返回到上一個(gè)頁(yè)面。
用法
// 1字符串
this.$router.push('/user/order')
// 2對(duì)象
this.$router.push({ path: '/user/order' })
//3傳參
this.$router.push({ path: '/user/order', query: {id: 123} })
//3-1取參數(shù)
this.$route.query.id
//4命名的路由
this.$router.push({ name: '/user/order', params: {id: 123} })
//4-1取參數(shù)
this.$route.params.id2.this.$router.replace()
描述
同樣是跳轉(zhuǎn)到指定的url，但是這個(gè)方法不會(huì)向history里面添加新的記錄，點(diǎn)擊返回，會(huì)跳轉(zhuǎn)到上上一個(gè)頁(yè)面。上一個(gè)記錄是不存在的。
用法
同this.$router.push()
3.this.$router.go()
原頁(yè)面表單中的內(nèi)容會(huì)丟失
this.$router.go(-1)：后退+刷新；this.$router.go(0)：刷新；this.$router.go(1)：前進(jìn)
4.this.$router.back()
原頁(yè)表表單中的內(nèi)容會(huì)保留
this.$router.back(-1)：后退 ；this.$router.back(0)：刷新；this.$router.back(1)：前進(jìn)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())
在項(xiàng)目開(kāi)發(fā)中我遇到了日期范圍選擇器,兩種獲取當(dāng)前日期并做處理的寫(xiě)法,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式
這篇文章主要介紹了vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式
這篇文章主要介紹了vue中使用jeecg進(jìn)行前后端聯(lián)調(diào)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Element Timeline時(shí)間線的實(shí)現(xiàn)
本文主要介紹了Element Timeline時(shí)間線的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例
在后臺(tái)管理系統(tǒng)，可以根據(jù)登錄用戶(hù)的不同返回不同路由，頁(yè)面也會(huì)根據(jù)這些路由生成對(duì)應(yīng)的菜單，本文主要介紹了vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例，感興趣的可以了解一下2024-04-04
下面小編就為大家分享一篇Vue修改mint-ui默認(rèn)樣式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue動(dòng)態(tài)加載圖片在跨域時(shí)無(wú)法顯示的問(wèn)題及解決方法
這篇文章主要介紹了解決VUE動(dòng)態(tài)加載圖片在跨域時(shí)無(wú)法顯示的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了簡(jiǎn)單了解vue.js數(shù)組的常用操作,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
vue使用自定義指令實(shí)現(xiàn)按鈕權(quán)限展示功能
這篇文章主要介紹了vue中使用自定義指令實(shí)現(xiàn)按鈕權(quán)限展示功能，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04