vue中$router.back()和$router.go()的用法
$router.back()和$router.go()
返回上一頁，有兩種方法：
1. $router.back()
2. $router.go()
使用$router.back()和$router.go(-1)作用相同，都是返回原頁面，但如果原頁面路由攜帶參數(shù)，使用以上兩個方式返回的原頁面路由參數(shù)消失，此時使用$router.back(-1)返回原頁面路由，參數(shù)仍存在。
go(-1):原頁面表單中的內(nèi)容會丟失；this.$router.go(-1):后退+刷新；this.$router.go(0):刷新；this.$router.go(1):前進；history.go(-1):后退+刷新；history.go(1):前進；back():原頁表表單中的內(nèi)容會保留；this.$router.back()：后退this.$router.back(0)刷新this.$router.back(1)前進history.back()后退history.back(0)刷新history.back(1)前進
vue點擊按鈕跳轉頁面總結 router.push router.replace router.go
總結一下在Vue里面跳轉頁面的方法
首先是vue提供的router-link，使用后再頁面里會轉換為a標簽
<router-link to="/test">go home</router-link>
使用函數(shù)進行任意頁面跳轉
普通跳轉
<button @click="jump('/test')">Click Me</button> ? ?// 這里進行設置要跳轉的路由
methods: {
? ? ? ? jump (path) {
? ? ? ? ? ? this.$router.replace(path)
? ? ? ? }
? ? ? ??
?? ??? ?// 或者
?? ??? ?jump (path) {
? ? ? ? ? ? this.$router.push({path: path})
? ? ? ? }
? ? }帶參數(shù)跳轉
<button @click="jump('/test')">Click Me</button> ? ?// 這里進行設置要跳轉的路由
methods: {
?? ??? ?jump (path) {
? ? ? ? ? ? this.$router.push({path: `${path}?a=1`})
? ? ? ? }
? ? ? ??
? ? ? ? // 或者
? ? ? ? jump (path) {
? ? ? ? ? ? this.$router.push({path: path, query:{a:123}})
? ? ? ? }
? ? }前進
@click="$router.go(1)"
后退
@click="$router.back()" ?? ?// 或者 @click="$router.go(-1)"
刷新當前頁面
@click="$router.go(0)" ?? ?// 或者 window.location.reload() ?? ?// 或者 history.go(0)
解析router.push 和 router.replace的區(qū)別
先說結論：router.push會在瀏覽器歷史紀錄里面添加一條記錄，router.replace不會在瀏覽器的歷史記錄里面添加信息。也就是通過router.push跳轉的頁面能夠返回上一頁。這里的上一頁指的是跳轉之前的那一頁
驗證：首先打開一個新的vue項目，把鼠標指針放在瀏覽器左上角的回退按鈕并按住左鍵，能夠看到目前瀏覽器歷史記錄除了默認新開打的一個頁面沒有任何其他vue路由信息
使用 this.$router.replace(path)這個方法跳轉后，再次點擊，可以看到路由跳轉后，歷史紀錄里面跟新打開的項目一樣。
說明使用router.replace不會往瀏覽器歷史記錄里添加信息。并且點擊返回按鈕也是返回到空頁面，并不會返回到vue的首頁
然后使用this.$router.push(path)方法，點擊跳轉后能夠看到歷史記錄里面多了一條記錄
點擊返回后，也能夠返回到首頁。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue?el-table實現(xiàn)動態(tài)添加行和列具體代碼
最近遇到一個動態(tài)增加行和列的需求,所以這里給大家總結下,這篇文章主要給大家介紹了關于vue?el-table實現(xiàn)動態(tài)添加行和列的相關資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue.js動態(tài)添加、刪除選題的實例代碼,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了vue移動端彈起蒙層滑動禁止底部滑動操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue+echarts實現(xiàn)可拖動節(jié)點的折線圖（支持拖動方向和上下限的設置）
制作一個折線圖用于顯示當前24小時的數(shù)據(jù)，并且可以通過拖動折現(xiàn)圖設置數(shù)據(jù)，接下來通過本文給大家分享vue+echarts實現(xiàn)可拖動節(jié)點的折線圖（支持拖動方向和上下限的設置），感興趣的朋友跟隨一起學習吧2019-04-04
學習 Vue 的時候覺得樣式綁定很簡單，但是使用的時候總是容易搞暈自己。這篇文章主要介紹了Vue 樣式綁定的實現(xiàn)方法，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了關于Vue-cli3煩人的eslint問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue+SSM實現(xiàn)驗證碼功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
vue 路由視圖 router-view嵌套跳轉的實現(xiàn)
這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉，主要實現(xiàn)的內(nèi)容有制作一個登錄頁面，跳轉到首頁，首頁包含菜單欄、頂部導航欄、主體，標準的后臺網(wǎng)頁格式，菜單點擊顯示不同的頁面，感興趣的小伙伴請參考下面文章內(nèi)容2021-09-09
Vue的nextTick方法是用于在DOM更新后執(zhí)行回調(diào)的工具函數(shù),它的作用是在當前JavaScript執(zhí)行環(huán)境中延遲執(zhí)行回調(diào),以確保在下次DOM更新循環(huán)之前,可以訪問到更新后的DOM,本文就給大家介紹一下Vue nextTick原理與作用,需要的朋友可以參考下2023-08-08
最近接觸了vue.js,一度非常好奇vue.js是如何監(jiān)測數(shù)據(jù)更新并且重新渲染頁面,這篇文章主要給大家介紹了關于Vue源碼學習之響應式是如何實現(xiàn)的相關資料,需要的朋友可以參考下2021-10-10