iView的導航、路由、鑒權


導航跳轉方式

  • iVIew組件中路由跳轉類似於view-router,可以直接使用to來進行跳轉


     
    使用to進行跳轉
  • 或者采用編程式導航:


     
    編程式導航跳轉

二者區別:
使用to進行跳轉,跳轉的菜單會變成一個a標簽,而使用編程式導航的方式進行跳轉,跳轉的菜單部分會變為一個li標簽。
iView3.0對於菜單操作還增加了對鍵盤的一個操作,按住ctrl點擊路由跳轉,會新打開一個頁面。

根據當前路由自動選擇對應菜單

動態獲取當前路由的值,並通過它來設置對應菜單高亮

 
active-name等於菜單項的name時,高亮

在路由級別對頁面做鑒權

通過路由守衛來設置在路由級別的鑒權,當路由進行跳轉的時候,攔截並判斷並執行業務,之后再決定是否跳轉

  • 設置路由守衛,設置路由的meta信息(這里我們給登錄頁面不進行鑒權,不設置meta信息,給admin設置鑒權)


     
    路由設置meta信息用以鑒權

     
    我們先把設置的meta信息打印出來看看

     
    登錄不鑒權未打印出任何東西,admin則打印出了我們設置的meta
  • 因此,我們判斷meta中的信息,將路由攔截后進行處理(這里假設我們把登錄信息存儲在localStorage中)


     
    進入admin,先鑒權,未登錄則跳轉登錄

根據不同平台動態路由不同組件

即使現在移動端已經做了很不錯的響應式,但任然存在一些問題達不到我們想要的效果。因此我們可以通過不修改路由的方式來切換不同的頁面以應對多端訪問。在路由級別動態的渲染不同頁面。

  • 我們首先需要通過api判斷當前的訪問平台


     
    判斷訪問端類型,若為移動端就修改path變量
  • 在路由路徑上進行一個動態的修改


     
    path的值會根據訪問的設備進行動態的修改
  • 我們再創建一個mobile的路徑,里面存放移動端的頁面。這樣就可以在路由級別做到多端多頁面的展示。




轉載於:https://www.jianshu.com/p/5ac6a13393a3


免責聲明!

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



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