本篇文章為大家展示了vue中使用router全局守衛(wèi)實(shí)現(xiàn)頁(yè)面攔截，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)主營(yíng)江山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開發(fā),江山h5微信平臺(tái)小程序開發(fā)搭建,江山網(wǎng)站營(yíng)銷推廣歡迎江山等地區(qū)企業(yè)咨詢

一、背景

　　在vue項(xiàng)目中使用vue-router做頁(yè)面跳轉(zhuǎn)時(shí)，路由的方式有兩種，一種是靜態(tài)路由，另一種是動(dòng)態(tài)路由。而要實(shí)現(xiàn)對(duì)路由的控制需要使用vuex和router全局守衛(wèi)進(jìn)行判斷攔截(安全問題文章最后討論)

二、使用場(chǎng)景

　　靜態(tài)路由的使用場(chǎng)景：在我們使用靜態(tài)路由實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)時(shí)，不管我們是否登錄，當(dāng)我們?cè)诘刂窓谛薷牡刂泛?，?yè)面會(huì)發(fā)生跳轉(zhuǎn)并展示頁(yè)面內(nèi)容（數(shù)據(jù)并不會(huì)被展示出來），這樣的問題顯然是不能夠被接受的；

　　動(dòng)態(tài)路由的使用場(chǎng)景：動(dòng)態(tài)路由無非就是從后端拿到了數(shù)據(jù)然后在加到router里面了。假如用戶登錄了，在地址欄修改地址便能直接訪問。所以動(dòng)態(tài)路由并不能起到攔截作用。

三、解決方案

　　使用vuex+router.beforeEach()+動(dòng)態(tài)路由實(shí)現(xiàn)頁(yè)面攔截

　　　　頁(yè)面刷新時(shí)會(huì)清楚vuex里面的值;(防止直接修改地址欄)

　　　　router.beforeEach()對(duì)跳轉(zhuǎn)前進(jìn)行攔截判斷;（對(duì)vuex里面的值進(jìn)行判斷）

　　　　當(dāng)用戶登錄時(shí)請(qǐng)求后臺(tái)拿到數(shù)據(jù)，加載路由.（跳轉(zhuǎn)頁(yè)面）

四、實(shí)現(xiàn)過程

1.首先定義vuex里面的值，需要定義兩個(gè)值：

a.登錄狀態(tài)信息的值 loginInfo 

b.存儲(chǔ)動(dòng)態(tài)路由的值 routerList

2.router.beforeEach()對(duì)路由跳轉(zhuǎn)前進(jìn)行控制　

//全局守衛(wèi)
router.beforeEach((to, from, next)=> {
 let userId = store.state.loginInfo.id;
 //這里是對(duì)登錄后的值進(jìn)行判斷，也可對(duì)token的值進(jìn)行判斷
 if (userId === '') {
  if (to.meta.requireAuth || to.name == null) {
  next({path: '/'})
  } else {
  next();
  }
 } else {
  //初始化動(dòng)態(tài)路由方法
  initRouter(router, store); 
  next();
 }
 }
);

名稱欄目：vue中使用router全局守衛(wèi)實(shí)現(xiàn)頁(yè)面攔截-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://weahome.cn/article/hodgs.html