Vue2視訊教程系列第三十六節—js裡如何跳轉頁面

摘要： 我們知道在vue裡進行頁面跳轉的話，我們使用<router-link>這個標籤，那在建構函式裡我們不能直接操縱DOM元素，我們又該如何進行頁面跳轉呢？Let’s go! 0f0719edc7593ae476c578d99f9167a6.jpg ...

我們知道在vue裡進行頁面跳轉的話，我們使用<router-link>這個標籤，那在建構函式裡我們不能直接操縱DOM元素，我們又該如何進行頁面跳轉呢？Let’s go!

如果在建構函式裡設定頁面跳轉，需要以下兩個步驟:

第一步驟：在DOM裡新增觸發元素

我們先在DOM裡設定三個按鈕，分別是“後退”，“前進”，“跳轉任一頁”。

<button class="button" @click="goback">後退</button> 
<button class="button" @click="forwards">前進</button> 
<button class="button" @click="goto">跳轉任一頁</button>

第二步驟：在建構函式裡操縱它們

當選擇“後退”按鈕，頁面會跳轉到前一頁；當選擇“前進”按鈕，頁面會跳轉到後一頁；當選擇“跳轉任一頁”按鈕，頁面會跳轉到跳轉任一頁。除了最後一個跳轉任一頁之外，其餘兩個按鈕都需要有歷史痕跡才可以跳轉的。方法當然要寫在methods裡：

methods: {
goback() {
this.$router.go(-1)
},
forwards() {
this.$router.go(1)
},
goto () {
this.$router.push("/about")
}
}

PS：需要注意的點是：

1. 在建構函式裡操縱路由，一定要寫 ”不要落掉

2. “後退”，“向前”的方法是go方法，後退的引數是“-1”，向前的引數是“1”。

this.$router.go(-1)有些類似javascript中的history.go(-1)；

this.$router.go(1)類似於window.history.forward()

3. 跳轉任一頁的方法是push方法，其引數是router.js裡配置的路徑，這種方法有些區別於以

上兩個方法。this.$router.push("/about")類似於javascript中的.

window.history.go("/about")

就到這裡了，休息休息一會兒吧：）明天繼續加油噢！