Vue路由守衛

我們在看一些網頁的時候如果想進一步了解一些東西的詳情資訊的話,當前的網頁就會讓我們進行登入,我們必須及逆行登入後才能夠看到我們想看到的詳情資訊,這個操作我們稱之為

路由守衛也是我們在做一些專案的時候必要進行的一步,如果我們不做這一步的話,自己所作專案中的所有的資料,不管是可以公共訪問的還是不能進行公共訪問的都會展現給使用者,這樣是存在一定性的危險的,會極可能的導致自己公司的一些重要資料的丟失或者被盜用,這個還是值得我們學習的.

咱們先看一下檔案的結構

安裝好了之後我們就可以開始寫**了我們需要在main.js進行配置一下:

import router from './router'  //
引入連線router檔案 在main.js進行引入

我們在main.js引入好了之後就可以在router檔案中進行對路由的配置了,我們vue的路由守衛有兩種:一種是全域性的路由守衛、一種是區域性的路由守衛,我們先說一下全域性的路由守衛吧,看一下**,以下的**是在router資料夾中的index檔案進行寫入的:

router.beforeeach((to,from,next)=>
else
}else
})export 
default router;//丟擲

如果為true的話就進行路由守衛如果不為true的話就不進行路由守衛

}

文中的注釋也寫道了如果為true的話就進行路由守衛如果不為true的話就不進行路由守衛,對當前的路由進行監控,如果當前的路由想要前往其他的頁面就必須進行路由守衛的流程.好了全域性的路由守衛就說到這,我們下面說一下區域性的路由守衛

區域性的路由守衛與全域性的路由守衛是非常類似的,也可以說是長得很像的雙胞胎但是只是性格不一樣,我們的兩個路由守衛也是如此,我們區域性的路由守衛的寫法:

,
//區域性的路由守衛寫法
beforeenter:(to,from,next)=>
else}}

看說的沒錯吧,兩種路由守衛是非常的類似的,我們的區域性路由守衛的用法是誰要進行路由守衛就在誰那裡面寫入路由守衛就可以了.

是不是非常的簡單易懂,如果看懂的小夥伴們就趕緊練習一下,勤學苦練,方能成為人上人,加油!!!!