vue中組件導航守衛

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

今天有遇到一個問題，就是在一個頁面 新增模塊按鈕 和 編輯模塊按鈕 點擊之后彈出框都是同一個子組件
在點擊保存修改的時候調用的是同一個接口，那后臺就找我們溝通說 新增按鈕和 編輯功能的按鈕 要發兩次請求，意思就是把之前發一次請求，現在發兩次。

首先拿到這個問題，我看到兩個按鈕點擊之后都是通過this.$router.push 進行跳轉的，跳轉過去都有攜帶參數，我就想到了to,from,next 路由導航守衛。我在跳轉的時候去傳遞參數。跳轉之后拿到參數，根據參數去判斷。

組件內的導航守衛，在組件渲染的時候，進行判斷，大概解決思路就是這樣的

beforeRouteEnter(to, from, next) {// 在渲染該組件的對應路由被 confirm 前調用// 不！能！獲取組件實例 `this`// 因為當守衛執行前，組件實例還沒被創建},beforeRouteUpdate(to, from, next) {// 在當前路由改變，但是該組件被復用時調用// 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，// 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。// 可以訪問組件實例 `this`},beforeRouteLeave(to, from, next) {// 導航離開該組件的對應路由時調用// 可以訪問組件實例 `this`}

beforeRouteEnter 守衛 不能 訪問 this，因為守衛在導航確認前被調用，因此即將登場的新組件還沒被創建。

不過，你可以通過傳一個回調給 next來訪問組件實例。在導航被確認的時候執行回調，并且把組件實例作為回調方法的參數。

beforeRouteEnter (to, from, next) {next(vm => {// 通過 `vm` 訪問組件實例}) }

注意 beforeRouteEnter 是支持給 next 傳遞回調的唯一守衛。對于 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支持傳遞回調，因為沒有必要了。

beforeRouteUpdate (to, from, next) {// just use `this`this.name = to.params.namenext() }

這個離開守衛通常用來禁止用戶在還未保存修改前突然離開。該導航可以通過 next(false) 來取消。

beforeRouteLeave (to, from, next) {const answer = window.confirm('Do you really want to leave? you have unsaved changes!')if (answer) {next()} else {next(false)} }

個人理解
在組件內的導航守衛中 ，只有 beforeRouterEnter中的next 才有回調函數，在這個回調函數中可以去操作組件實例，意思就是在這個回調函數中可以去操作data狀態

---

越努力是越幸運，加油，干就完了

總結

以上是生活随笔為你收集整理的vue中的组件导航守卫，个人理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。