我眼中的 VUE 路由 和 路由守衛

2021-08-24 23:21:47 字數 1321 閱讀 5472

用過vue的程式設計師都知道,路由是乙個專案中必不可少的部分。現今的專案,哪怕再精簡,首先登陸註冊這是必不可少的,這就離不開路由。

本人也接觸過幾個vue的專案,現在就來說說我眼中的路由。首先,從router資料夾說起,它是乙個專案路由的根,其它各個分頁面的路由都是從這發散出的。舉個例子,登陸之後是基本都是使用者所看到的的主頁面,它基本包含了使用者可以使用的所有功能。我們假設使用者要使用提現功能,那他就需要進入個人賬號頁面來進入提現頁面完成自己所需要的操作。這裡提現頁面作為個人賬號介面的子路由實現功能。

所以vue的路由,可以看做乙個樹,由根發散而出,再由乙個個子路由巢狀發散,最終構成整個專案的結構。

接下來講講vue的使用,最基本的應用自然不用說,實現簡單頁面跳轉(指的是不用驗證也不用傳參),仍然是上面所說的例子,那麼當你進入使用者的主頁面時,是需要判斷登入是夠成功的,當你進入都提現頁面,是需要傳遞引數來獲取你的餘額,否則使用者怎麼知道自己還有多少餘額可提現呢。

接下來就不得不講到vue的導航守衛了,

主要用來通過跳轉或取消的方式守衛導航。  在實際使用中,可以使用 router.beforeeach註冊乙個前置全域性守衛。

const  router  =  new vuerouter()

router.beforeeach((to,from,next)=>)

下面來說說這3個引數:

to:即將進入的目標 -->(路由物件)。

from:當前導航正要離開的路由。

next:(function)必要呼叫此方法來resolve這個鉤子。執行效果依賴next呼叫的引數:

next():進行管道中的下乙個鉤子,如果全執行完,就是confirmed。

next('/')/next(path:'/');中斷當前導航,跳轉到乙個不同的位址。

next(error):如果引數為乙個error例項,則會終止導航。

如果不呼叫next(),鉤子就不會被resolve。

1.直接呼叫$router.push

getre(id)`})}

//路由配置如下:

2.通過name來匹配路由,params來傳遞引數

this.$router.push(

})//路由配置如下

3.通過path來匹配路由,query來傳遞引數

this.$router.push(

})//路由配置如下

注:前2中子元件使用$route.params.id來獲取引數。

第3種採用$route.query.id來獲取。

Vue路由守衛之路由獨享守衛

路由獨立守衛,顧名思義就是這個路由自己的守衛任務,就如同咱們lol,我們守衛的就是獨立一條路,保證我們這條路不要被敵人攻克 當然我們也得打團配合 在官方定義是這樣說的 你可以在路由配置上直接定義 beforeenter 守衛,這些守衛與全域性前置守衛的方法引數是一樣的。const router ne...

Vue路由守衛

js const router new vuerouter 前置的鉤子函式 最後要執行next 才會跳轉 router.beforeeach to,from,next 後置的鉤子函式 已經跳轉了不需要next router.aftereach to,from 主要是簡單介紹一下,路由守衛主要用於檢驗...

vue 路由守衛

正如其名,vue router提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中 全域性的,單個路由獨享的,或者元件級的。記住引數或查詢的改變並不會觸發進入 離開的導航守衛 可以使用router.beforeeach註冊乙個全域性前置守衛 import router f...