VUE路由防衛功能舉例

??路由防衛的功能在前端應用比較廣泛，主要用于前端頁面與頁面之間的跳轉限制，也可以稱之為權限控制，我們接下來使用登錄頁面與主頁面使用路由防衛功能。

??路由防衛分為全局防衛、路由獨享的守衛、組件守衛。全局防衛是基于所有的頁面全部防衛，組件守衛會導致耦合性增加，所有推薦使用路由獨享守衛。

沒有使用守衛時的代碼

主頁面路由信息： const routes = [ { path:"/", name:"公安系統", component:Index },登錄頁面路由信息：{ path:"/login", name:"login", component:login}, ]

實現主頁面的跳轉的前置頁面只能是登錄頁面功能

修改后的代碼：

主頁面路由信息： const routes = [ { path:"/", name:"公安系統", component:Index，beforeEnter:(to,from,next)=> {if(from.path==='/login'){next();}else{next({path:'/login'})console.log('請登錄！');}},登錄頁面路由信息：{ path:"/login", name:"login", component:login}, ]

beforeEnter:(to,from,next)=>主函數

總結

以上是生活随笔為你收集整理的VUE路由防卫功能举例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。