vue vue router實現路由攔截功能

2021-10-18 04:24:17 字數 1418 閱讀 4945

路由配置如下,在這裡自定義了乙個物件的引數meta: 來標記哪些路由是需要登入驗證的,導航被觸發的時候只要判斷是否目標路由中是否有meta這個物件,且meta包含authrequired屬性,其值為true。這裡訪問帶有meta物件的路由是被攔截的。
,        component: config

},,component: about1

},,, }

,

main.js通過router.beforeeach全域性函式,每次路由跳轉都會出發函式判斷是否有登入資訊

router.

beforeeach

((to, from, next)

=>

else);

}}else

}

login()

).then

((res)

=>

{

console.

log(res)

; console.

log(res.data.msg)

;this

.$store.

commit

('setuserid'

,this

.loginform.userid)

;this

.$store.

commit

('setuserpwd'

,this

.loginform.pwd)

; console.

log(

this

.loginform.userid)

; console.

log(

this

.loginform.userpwd)

; console.

log(

"列印的id為:"

+sessionstorage.

getitem

('userid'))

; console.

log(

"列印的pwd為:"

+sessionstorage.

getitem

('userpwd'))

;

之後每次進行路由的時候都會判斷登入資訊,在登出的時候呼叫函式,;利用sessionstroage.clear()將全域性資訊清楚。防止登出之後路由攔截失

vue VueRouter 基礎功能詳解

vue vuerouter 基礎功能詳解 目錄 5 動態路由匹配 6 命名路由 7 程式設計式導航內容 vue router是vue.js官方路由管理器。它和vue.js的核心深度整合,可以非常方便的用於spa單頁面的開發。新增路由佔位符 router view 定義路由元件 配置路由規則並建立路由...

vue VueRouter 後台管理案例

vue vuerouter 後台管理案例 目錄 4 完整 及效果圖內容 一般情況下,前端頁面由ui做好頁面 html css 給我們,我們根據ui頁面修改為vue專案。版權資訊 效果圖示1 1 根據專案的整體布局劃分好元件結構,通過路由導航控制項的顯示。功能實現及步驟如下 把左側選單改造為路由鏈結 ...

Vue Vue router路由帶引數跳轉

1.newscontainer.vue 2.router.js 1.匯入vue router import vuerouter from vue router 2.手動安裝 vuerouter import homecontainer from components tabbar homeconta...