# watch監聽路由重復加載 > 項目要求，列表頁跳轉到一個內容頁，每個打開的內容頁之間切換還要做到點擊就刷新數據， 之前的解決方式就是用watch去監聽路由，但是監聽路由后，第一次進入無效，關閉后打開就會成倍的去請求watch里面的方法。應該是框架的原因，一直有緩存的router的信息在，所以還會去請求相同的東西！歸根結底就是vue的生命周期不夠了解 ## 解決辦法使用“導航守衛” ``` //next()是必須加的 beforeRouteEnter (to, from, next) { console.log('beforeRouteEnter被調用：在渲染該組件的對應路由被 confirm 前調用') // 在渲染該組件的對應路由被 confirm 前調用 // 不！能！獲取組件實例 `this` 因為當守衛執行前，組件實例還沒被創建 // 可以通過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，并且把組件實例作為回調方法的參數。 next(vm => { // 通過 `vm` 訪問組件實例 console.log(vm) }) }, // beforeRouteEnter 是支持給 next 傳遞回調的唯一守衛。 // 對于 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支持傳遞回調，因為沒有必要了。` beforeRouteUpdate (to, from, next) { // 在當前路由改變，但是該組件被復用時調用 // 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候， // 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。 // 可以訪問組件實例 `this` console.log('beforeRouteUpdate被調用：在當前路由改變，但是該組件被復用時調用')` next() }, beforeRouteLeave (to, from, next) {`** // 導航離開該組件的對應路由時調用` // 可以訪問組件實例 `this`` const answer = window.confirm('是否確認離開當前頁面')` if (answer) { console.log('beforeRouteLeave被調用：導航離開該組件的對應路由時調用')` next() } else { next(false) } }, ```