VUE中路由變化this.$router(push\replace\go\back)解讀
更新時間:2023年10月24日 11:27:31 作者:前端不加班
這篇文章主要介紹了VUE中路由變化this.$router(push\replace\go\back),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1.this.$router.push()
描述
跳轉(zhuǎn)到指定的url,但這個方法回向history添加一個記錄,點擊后退會返回到上一個頁面。
用法
// 1字符串
this.$router.push('/user/order')
// 2對象
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,但是這個方法不會向history里面添加新的記錄,點擊返回,會跳轉(zhuǎn)到上上一個頁面。上一個記錄是不存在的。
用法
同this.$router.push()
3.this.$router.go()
原頁面表單中的內(nèi)容會丟失
this.$router.go(-1):后退+刷新;this.$router.go(0):刷新;this.$router.go(1):前進
4.this.$router.back()
原頁表表單中的內(nèi)容會保留
this.$router.back(-1):后退 ;this.$router.back(0):刷新;this.$router.back(1):前進
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中實現(xiàn)圖表數(shù)據(jù)的動態(tài)展示的示例代碼
隨著數(shù)據(jù)可視化技術(shù)的發(fā)展,圖表在前端開發(fā)中扮演著越來越重要的角色,Vue.js 作為一個流行的前端框架,以其靈活性和易用性,成為了實現(xiàn)圖表動態(tài)展示的理想選擇,在這篇博客中,我們將學習如何在 Vue 3 中實現(xiàn)動態(tài)展示圖表數(shù)據(jù),需要的朋友可以參考下2024-11-11
ElementUi中select框在頁面滾動時el-option超出元素區(qū)域的問題解決
本文主要介紹了ElementUi中select框在頁面滾動時el-option超出元素區(qū)域的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-08-08
關(guān)于element-ui?select?下拉框位置錯亂問題解決
這篇文章主要介紹了關(guān)于element-ui?select?下拉框位置錯亂問題解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09

