在Vue中，當我們通過路由跳轉到不同的頁面時，我們有需要時可以通過回退按鈕返回之前的頁面。Vue提供了一個非常方便的方式讓我們實現瀏覽器回退操作：使用$router.go()方法。

當我們使用$router.go()方法時，Vue會自動銷毀當前頁面的組件實例，然后重新創建上一個頁面的組件實例。換句話說，當我們回退頁面時，上一個頁面的組件會重新被創建并且被掛載到DOM上。

mounted() {
console.log('mounted')
},
beforeDestroy() {
console.log('beforeDestroy')
}

上面的代碼是一個簡單的Vue組件，它在mounted和beforeDestroy生命周期鉤子中都打印了一句話。

現在，我們在這個組件中加入一個跳轉到另一個頁面的按鈕：

<template>
<div>
<button @click="$router.push('/another-page')">跳轉到另一個頁面</button>
</div>
</template>

當我們點擊這個按鈕跳轉到另一個頁面后，我們可以在控制臺中看到beforeDestroy鉤子被調用了。這是因為當我們跳轉到另一個頁面時，Vue會自動銷毀當前頁面的組件實例。

那么，當我們回退頁面時，Vue會做什么呢？我們可以在beforeDestroy鉤子中加上一個打印語句：

beforeDestroy() {
console.log('beforeDestroy')
console.log(this.$el.outerHTML)
}

這樣，我們在控制臺中就可以看到當前組件實例被銷毀前的HTML代碼：

<div>
<button @click="$router.push('/another-page')">跳轉到另一個頁面</button>
</div>

現在，我們可以點擊回退按鈕回到上一個頁面，我們會發現，上一個頁面的組件實例重新被創建了，并且打印了mounted鉤子。

這就是Vue回退頁面銷毀的原理。Vue會自動銷毀當前頁面的組件實例，然后重新創建上一個頁面的組件實例。這也是Vue非常方便的一點，因為我們不需要手動銷毀組件實例，Vue會自動幫我們處理好。