技術問答
技術文章
iT 徵才
Tag
聊天室
2023 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
0
Navigation Guards 導航守衛
vue學習筆記
yenchenjulia
2024-02-21 14:50:04
‧
393 瀏覽
分享至
前言
本來看了看以為自己懂了,用法也跟Lifecycle hooks差不多,覺得好像沒什麼好說的,打算跳過導航守衛,但今天一早起床,試著在腦海回想解釋給自己聽,支支吾吾的,非常不靠譜,我還是很需要故事來詮釋,用小朋友都能理解的故事來記憶才能讓我印象深刻。也許之後兒子想學,可以派上用場XD
導航守衛
今天來打造一間虛擬銀行吧!礙於時間,沒有實作只有概念講解,小兒子腸胃炎ing,趁他睡覺休息時偷空寫一下(淚),好的,不說廢話,銀行最重要就是保全系統,我的認知下,保全系統即為今天的主題導航守衛。下面會提到的每個hook都是一個守衛的概念,各司其職,也分派在以下不同的三個工作竿位
全域:也就是整間銀行,不管到哪都適用,有三個hooks,可供調用
beforeEach:本來我的想像是黏在銀行各個門窗上的保全系統,防止沒有權限的外人從任何地方進入,但越想越矛盾,他的意思是在進入任一路由前必經的程序,所以應該假設自己是銀行員工,當你進到銀行大廳,不管你要去哪個單位(跳轉至每個路由前),都必須有員工證(身份驗證)才能進入,否則就會被請回大廳(回到登入頁面)。
beforeResolve:這個hook在路由跳轉前但beforeEach執行完且在所有路由的導航守衛都執行完時觸發,通常用在呼叫api跟拿資料。這個比較抽象,我還沒想好它是什麼?是單位內的同仁先行得知誰誰誰要來,他會需要用到什麼資料,在他還沒進門前,先備好的意思嗎?我不是很確定...
afterEach:路由跳轉結束後觸發,通常用於追蹤使用者瀏覽紀錄,也就是說如果跳轉沒失敗的話,就會紀錄這個人到了這裡辦了什麼事。
路由
beforeEnter:做的事跟全域beforeEach一樣,只是直接放在指定的路由裡,我的想像就是銀行裡的大金庫,不是人人都能去,應該只有高層才到得了,去到那就會有beforeEnter等著查驗你的身分,閒雜人等只能乖乖地離開
元件
有時A單位跟B單位因為有重疊的業務,所以會使用同一個小金庫(同一元件),所以從A單位轉到B單位(路由被更新了),但對到的是同一個實體元件時,這時就可以出動下面三個hooks共同管理。
beforeRouteEnter:路由尚未進入該元件時觸發,比較特別的是他跟上次Lifecycle提及的beforeCreate一樣沒有this,因為元件還沒有被建立,但他可以用next取得實體。做的事也不外乎跟上面那些守衛一樣,身份驗證,數據加載以及路由重新導向。
beforeRouteUpdate:路由被改變,但元件本身是同一個的時候被觸發,通常用於數據重新加載,因為使用對象不同,看的文件會有所差異,例如外匯進出兩個單位(我亂講的,沒在銀行待過XD只是讓自己好理解)
beforeRouteLeave: 當路由要離開時自動觸發,通常用在詢問使用者是否真的要跳轉到其他路由,就是你要關金庫前,守衛會問你:你確定事情都處理妥當了嗎?
心得
在怕兒子隨時起來的時間壓力下趕完了這篇,但有寫有差,我腦袋裡每個守衛都已經搭上自己該有的長相XD,負責身份驗證的最好是個凶神惡煞人人怕,數據加載的就是一板一眼會計臉,好愛幻想喔我,哈哈!寫到這,我的兒子醒來催我他餓了,希望他等等吃了不要吐,快快好起來呀~
參考資料
Navigation Guards
4-4 路由守衛(Navigation Guards)
不只懂 Vue 語法:試解釋如何使用導航守衛?
號外:工商一下,Udemy大特價,只有今天,有需要的人可以趕快去買喔!我追的工程師作家推薦下面這個,有興趣可參考
The Complete 2024 Web Development Bootcamp
留言
追蹤
檢舉
直播研討會
{{ item.subject }}
{{ item.channelVendor }}
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
1123
組
團體組數
52
組
累計文章數
23096
篇
完賽人數
656
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
2018鐵人賽
javascript
2017鐵人賽
python
windows
php
c#
windows server
linux
css
程式設計
react
vue.js
熱門問題
老婆line被盜用換sin卡也無法拿回帳號使用權
ISO 27001改版輔導顧問公司推薦
怎麼才能免費申請
如果當超人拯救了別人,世界真的需要超人嗎?
網路佈線請益
VM以瀏覽器連線至虛擬機器的問題
檔案管理與呼叫資料夾(電腦使用習慣)
win10更改資料夾顏色
請問影片中的螢幕放大功能是如何做到的?
AD群組原則與使用者端不同步
熱門回答
如果當超人拯救了別人,世界真的需要超人嗎?
FAT32 有分什麼版本嗎? CCTV 不支持
網路佈線請益
win10更改資料夾顏色
ISO 27001改版輔導顧問公司推薦
熱門文章
Vigor Router Firewall NAT 一開全球通,如何做限制,只允許白名單IP通過,甚至敲門再開 TOTP 驗證
你知道駭客如何入侵你的網站嗎?
如何不顯示臉書的贊助商廣告 跟 為你推薦
使用 AWS建立商品管理系統
線上點餐系統
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}