最近開(kāi)始準(zhǔn)備面試，盡管是電話面試全身還是充斥著緊張感，一面感覺(jué)還不錯(cuò)，主要是問(wèn)react和vue的一些生命周期，介紹下redux...，二面印象深刻的是問(wèn)到了介紹下router攔截，我覺(jué)得還是個(gè)人對(duì)router 的理解不夠，當(dāng)下有些不知道該怎么回答，然后就沒(méi)有回復(fù)了，面后去看了下文檔，意識(shí)到平時(shí)在做的項(xiàng)目在登陸前使用的beforeEach其實(shí)就是在做攔截功能，轉(zhuǎn)換成自己的思想，還是太弱了，把我看到的我能理解的博主的回答寫(xiě)在這里，做一個(gè)記錄。

vue中使用router全局守衛(wèi)實(shí)現(xiàn)頁(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)行判斷攔截(安全問(wèn)題文章最后討論)
二、使用場(chǎng)景
　　靜態(tài)路由的使用場(chǎng)景：在我們使用靜態(tài)路由實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)時(shí)，不管我們是否登錄，當(dāng)我們?cè)诘刂窓谛薷牡刂泛?#xff0c;頁(yè)面會(huì)發(fā)生跳轉(zhuǎn)并展示頁(yè)面內(nèi)容（數(shù)據(jù)并不會(huì)被展示出來(lái)），這樣的問(wèn)題顯然是不能夠被接受的；
　　動(dòng)態(tài)路由的使用場(chǎng)景：動(dòng)態(tài)路由無(wú)非就是從后端拿到了數(shù)據(jù)然后在加到router里面了。假如用戶(hù)登錄了，在地址欄修改地址便能直接訪問(wèn)。所以動(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)用戶(hù)登錄時(shí)請(qǐng)求后臺(tái)拿到數(shù)據(jù)，加載路由.（跳轉(zhuǎn)頁(yè)面）
四、實(shí)現(xiàn)過(guò)程
　　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 ( getToken()){if (userId === '') {if (to.meta.requireAuth || to.name == null) {next({path: '/'})} else {next();}} else {//初始化動(dòng)態(tài)路由方法initRouter(router, store); next();}} );

3.初始化動(dòng)態(tài)路由
在全局守衛(wèi)對(duì)應(yīng)條件下加載動(dòng)態(tài)路由數(shù)據(jù)routerList和在登錄成功時(shí)存儲(chǔ)登錄成功的信息loginInfo
新建一個(gè)xxx.js文件 引入axios 創(chuàng)建一個(gè)函數(shù)并使用export 暴露該方法;
請(qǐng)求成功拿到數(shù)據(jù)后，把數(shù)據(jù)造成和routes里的數(shù)據(jù)一樣。然后使用 router.addRoutes 添加進(jìn)去;
index中的默認(rèn)路由

源代碼

import axios from 'axios' export const initRouter = (router,store)=>{if (store.state.routerList.length > 0) {return;}axios.get(' URL').then((rest)=>{let routerList = [];if(rest.data.success){let routers = rest.data.body;routers.forEach(router=>{let {path,component,name,} = routerlet routerObj = {path:path,name:name,component(resolve){if (component.startsWith("index")) {require(['../components/' + component + '.vue'], resolve)} },meta:{requireAuth:true} //是否是登錄權(quán)限控制};routerList.push(routerObj);});//add到router中router.addRoutes(routerList); //存儲(chǔ)到vuex中store.commit('routerList', routerList); }else{console.log(rest.data.error);}}).catch((error)=>{console.log(error);}) }

4.登錄成功后存儲(chǔ)成功狀態(tài)信息并跳轉(zhuǎn)頁(yè)面

至此，頁(yè)面攔截功能已實(shí)現(xiàn)。
五、總結(jié)
　　該方法實(shí)現(xiàn)主要用到了:
　　1.vuex及頁(yè)面刷新時(shí)會(huì)對(duì)vuex進(jìn)行清空，所以比如退出時(shí)要對(duì)頁(yè)面window.location.reload()，其它地方類(lèi)似。
　　2.router.beforeEach()鉤子函數(shù)及關(guān)鍵的router.addRoutes方法
　　3.es6的一些寫(xiě)法

總結(jié)

以上是生活随笔為你收集整理的reload vue 重新加载_vue面试，谈下router拦截的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。