Vue Router 是 Vue.js 官方的路由管理器。它允許我們在 Vue 應用程序中實現客戶端路由，使單頁面應用程序（SPA）變得更加容易。Vue Router 能夠非常靈活地管理 Vue 應用程序的路由，而且它還可以方便地保存每個路由的狀態。

在 Vue Router 中，每個路由都有自己的狀態。當我們從一個路由切換到另一個路由時，前一個路由的狀態就會被銷毀，而后一個路由的狀態則會被創建。Vue Router 提供了一種方法來保存和管理每個路由的狀態，這種方法稱為“路由導航守衛”。

router.beforeEach((to, from, next) =>{
// 在切換路由之前保存當前路由的狀態
to.meta.keepAlive && from.meta.keepAlive && (from.meta.savedScrollTop = document.body.scrollTop)
next()
})
router.afterEach((to, from) =>{
// 在切換路由之后恢復上一個路由的狀態
if (to.meta.keepAlive && from.meta.keepAlive) {
Vue.nextTick(() =>{
document.body.scrollTop = from.meta.savedScrollTop
})
}
})

上面的代碼是 Vue Router 中保存路由狀態的一個示例。在這個示例中，使用了兩個導航守衛 - beforeEach 和 afterEach。beforeEach 導航守衛在切換路由之前執行，這里我們可以保存前一個路由的狀態。afterEach 導航守衛在切換路由之后執行，這里我們可以恢復前一個路由的狀態。

在這個示例中，我們使用了路由元信息（Route Meta Fields）中的 keepAlive 屬性來控制是否需要保存路由的狀態。當 keepAlive 屬性為 true 時，表示當前路由需要保存狀態。此外，我們還需要手動保存當前路由的滾動條位置，使用 savedScrollTop 變量來暫存滾動條位置值。

值得注意的是，當使用 keepAlive 屬性來保存路由狀態時，必須同時啟用前一個路由和后一個路由的 keepAlive 屬性。如果忽略其中一個路由的 keepAlive 屬性，可能會導致狀態保存和恢復不正確。

在 Vue Router 中使用類似于上面示例的代碼來保存每個路由的狀態是非常便捷的。這種方法可以為我們提供更好的用戶體驗，因為用戶在切換路由時，不會失去已經填寫的表單信息等數據。同時，也可以提升應用程序的性能，因為不需要重新加載之前訪問過的頁面。