Vue裏點擊按鈕跳轉頁面總結，router.push router.replace router.go

總結一下在Vue裏面跳轉頁面的方法

首先是vue提供的router-link，使用後再頁面裏會轉換爲a標籤

<router-link to="/test">go home</router-link>

使用函數進行任意頁面跳轉

• 普通跳轉

<button @click="jump('/test')">Click Me</button>    // 這裏進行設置要跳轉的路由

methods: {
        jump (path) {
            this.$router.replace(path)
        }
        
		// 或者
		jump (path) {
            this.$router.push({path: path})
        }
    }

• 帶參數跳轉

<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的區別

先說結論：router.push會在瀏覽器歷史紀錄裏面添加一條記錄，router.replace不會在瀏覽器的歷史記錄裏面添加信息。也就是通過router.push跳轉的頁面能夠返回上一頁。這裏的上一頁指的是跳轉之前的那一頁

---

驗證：首先打開一個新的vue項目，把鼠標指針放在瀏覽器左上角的回退按鈕並按住左鍵，能夠看到目前瀏覽器歷史記錄除了默認新開打的一個頁面沒有任何其他vue路由信息
使用 this.$router.replace(path)這個方法跳轉後，再次點擊，可以看到路由跳轉後，歷史紀錄裏面跟新打開的項目一樣。說明使用router.replace不會往瀏覽器歷史記錄裏添加信息。並且點擊返回按鈕也是返回到空頁面，並不會返回到vue的首頁

然後使用this.$router.push(path)方法，點擊跳轉後能夠看到歷史記錄裏面多了一條記錄
點擊返回後，也能夠返回到首頁。