vue,uniapp 路由守衛


在vue,uniap等項目中,路由守衛和接口攔截一樣是必不可缺少的一部分功能;

路由守衛分為 router.beforeEach(全局前置路由守衛)和 router.afterEach(全局后置路由守衛);

全局前置路由守衛有三個參數:

  1. to:將要跳轉到的路由頁面;
  2. from:從哪個路由頁面離開;
  3. next: 一定要調用該方法來resolve這個鈎子,將要執行什么樣的操作,可以用這個方法來調用;
  • next(false)為中斷當前路由跳轉;
  • next('/')或者next({ path: '/'}): 跳轉到一個不同的地址,或者你指定的頁面,當前導航被中斷了,然后進行一個新的導航。你可以向next傳遞位置對象,且允許設置為 replace:true、name:'home'之類的選項以及 任何用在router-link的to prop或者router.push中的選項。
  • next(error): 如果傳入next的參數是一個error實例,則導航會被終止且該錯誤會被傳遞給router.onError注冊過的回調。

確保next函數在任何給定的導航守衛中都被嚴格調用一次。它可以出現多於一次,但是只能在所有的邏輯路徑都不重疊的情況下,否則鈎子永遠都不會被解析或報錯。

router.beforeEach((to,from,next) => {
  if(...某某條件下){
    next({name: 'login'})
  }
  next()   //在執行某某條件下next,后下面也會執行,這樣為調用兩次
})

后置鈎子則就比較簡單了,兩個參數:to、from;
參數跟路由守衛前置鈎子的參數相同 ↑;
//然后路由跳轉之后需要執行什么事件,有你判斷;


免責聲明!

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



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