vue中組件導(dǎo)航守衛(wèi)

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

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

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

組件內(nèi)的導(dǎo)航守衛(wèi)，在組件渲染的時候，進(jìn)行判斷，大概解決思路就是這樣的

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

beforeRouteEnter 守衛(wèi) 不能 訪問 this，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用，因此即將登場的新組件還沒被創(chuàng)建。

不過，你可以通過傳一個回調(diào)給 next來訪問組件實(shí)例。在導(dǎo)航被確認(rèn)的時候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。

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

注意 beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)。對于 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經(jīng)可用了，所以不支持傳遞回調(diào)，因?yàn)闆]有必要了。

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

這個離開守衛(wèi)通常用來禁止用戶在還未保存修改前突然離開。該導(dǎo)航可以通過 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)} }

個人理解
在組件內(nèi)的導(dǎo)航守衛(wèi)中 ，只有 beforeRouterEnter中的next 才有回調(diào)函數(shù)，在這個回調(diào)函數(shù)中可以去操作組件實(shí)例，意思就是在這個回調(diào)函數(shù)中可以去操作data狀態(tài)

---

越努力是越幸運(yùn)，加油，干就完了

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。