vue路由當中的導航鈎子中關於next()方法的理解


在這里我用通俗點的說法解釋上next(),next(false),next('/'),next(error),希望通過這接地氣的解釋你能掌握這幾個知識點。

背景:你乘坐汽車從A景區想趕往B景區(模擬路由A跳轉到路由B)
1.next()

next():進行管道中的下一個鈎子。如果全部鈎子執行完了,則導航的狀態就是confirmed(確認的)。

你乘坐汽車要從A景區到B景區,路過關卡時,守門人攔下你,你量出了next(),守門人一看沒問題,趕緊放行,於是你順利到達了B景區。

2.next(false)

next( false )中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到from路由對應的地址。

如果你量出了next(false),守門人立馬關住大門,不讓你走,哪都不讓你去,你說想換個交通方式,走路或者坐飛機,都不行,老實待在A景區吧

3.next(’/’)

next( ’ / ‘)或者next({ paht:’ / ’ }):跳轉到一個不同的地址。當前的導航被中斷,然后進行一個新的導航。可傳遞的參數可以是router-link標簽中的to屬性參數或router.push中的選項

你原本打算從A景區到B景區,但是走到關卡的時候由於某些原因改變了主意,想要去C景區,你對守門員量出了next({path:’/C’}),守門員一看,哦,原來你不去B了,要去C啊,去吧去吧,然后你順利到達了C景區

4.next(error)

next( error ):如果傳入next的參數是一個Error實例,則導航會被終止且該錯誤會被傳遞給router.onError()注冊過的回調。

你在出發之前,給你媽媽說,媽,要是有什么事我立馬通知你,你記得查看消息啊(你注冊了router.onError())走到中途,出現了意外,你發出next(error),然后你媽就收到了消息,趕緊打電話問你怎么了(執行router.onError()里的回調)

最重要的是自己要吃透文檔,如果一遍不懂再看一遍,再不懂就自己寫demo去實踐.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM