Vue Router 是一個 Vue.js 模塊,它是 Vue.js 官方的路由管理器。Vue Router 可以讓我們通過特定的 URL 訪問不同的頁面,同時也可以幫助我們在頁面之間切換。
Vue Router 可以用來切換路由,但是切換路由后,頁面是不會刷新的。這是因為默認情況下,Vue Router 切換的是虛擬 DOM ,不會觸發實際網頁的刷新。但是有時候跳轉到一些頁面時,我們希望頁面可以刷新,否則就無法響應一些后臺邏輯或者更新頁面數據。那么怎么解決這個問題呢?
Vue Router 提供了一種方法:使用 Navigation Guards。 Navigation Guards 是一組回調函數,用于處理 Vue Router 的生命周期。在切換路由或者刷新頁面時,Vue Router 會在一定的時刻調用 Navigation Guards。我們可以在這些回調函數中執行自己的邏輯,包括刷新頁面。
const router = new VueRouter({ mode: 'history', routes: [...] }) router.beforeEach((to, from, next) =>{ if (to.path === '/refresh') { window.location.reload() } else { next() } })
上面代碼中,我們使用了 Vue Router 的 beforeEach() 方法,這個方法會在每次路由切換時觸發。我們可以在這里編寫自己的邏輯。上面的代碼表示,如果要跳轉到 /refresh 頁面,那么就刷新頁面。
Vue Router 還提供了一個名為 beforeRouteEnter 的鉤子函數。這個函數在路由切換后,進入新頁面前執行。我們可以在這個函數中調用 window.location.reload() 方法來刷新頁面。
const Foo = { template: `foo`, beforeRouteEnter(to, from, next) { if (to.path === '/refresh') { window.location.reload() } else { next() } } }
在上面的代碼中,我們使用了 Vue 組件中的 beforeRouteEnter() 函數。如果要跳轉到 /refresh 頁面,就會執行該函數,并調用 window.location.reload() 方法刷新頁面。
總之,在 Vue Router 中切換頁面不會自動刷新頁面,但是我們可以通過使用 Navigation Guards 或者鉤子函數,在切換頁面的同時刷新頁面,以達到我們的業務需求。