Vue路由守衛(wèi)案例代碼
Vue路由守衛(wèi)
路由守衛(wèi),簡(jiǎn)單理解來說就是,當(dāng)用戶要進(jìn)行一些操作時(shí),我需要用戶的一些信息或數(shù)據(jù)或行為,我判斷過后,才會(huì)同意用戶進(jìn)行操作,說到這里,我想大家心里都或多或少有點(diǎn)理解了吧,官方一點(diǎn)的解釋就是進(jìn)行操作的鑒權(quán),當(dāng)操作與之條件匹配時(shí),操作成功,當(dāng)操作與之不匹配時(shí),操作終止,作用就是是對(duì)路由進(jìn)行權(quán)限控制。
在Vue中,路由守衛(wèi)分為三種:全局路由守衛(wèi)、獨(dú)享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi)
全局路由守衛(wèi)
全局路由守衛(wèi),顧名思義,一旦配置,那么作用范圍就是所有的路由,全局路由又分為全局前置守衛(wèi)和全局后置守衛(wèi)
全局前置守衛(wèi)
全局前置守衛(wèi),組件初始化時(shí)調(diào)用,每次路由切換之前調(diào)用,路由切換之前指的就是,舉個(gè)例子說,當(dāng)前我在A路由組件,我要切換到B路由組件,那么前置路由守衛(wèi)就是在我點(diǎn)了切換按鈕,但B路由組件還沒有被呈現(xiàn)在頁面上的時(shí)候被調(diào)用。
//全局前置守衛(wèi) router.beforeEach((to,from,next) =>{ //第一個(gè)參數(shù)to,包含的內(nèi)容是切換后的路由對(duì)象,也就是跳轉(zhuǎn)后的路由對(duì)象 //第二個(gè)參數(shù)from,包含的內(nèi)容的是切換前的路由對(duì)象,也就是跳轉(zhuǎn)前的路由對(duì)象 //第三個(gè)參數(shù)next(),是否往下執(zhí)行,執(zhí)行的話,如果不寫的話路由就不會(huì)跳轉(zhuǎn),操作將會(huì)終止 })
全局后置守衛(wèi)
全局后置守衛(wèi),組件初始化時(shí)調(diào)用,每次路由切換之后調(diào)用,路由切換之后指的就是,舉個(gè)例子說,當(dāng)前我在A路由組件,我要切換到B路由組件,那么前置路由守衛(wèi)就是在我點(diǎn)了切換按鈕B路由組件呈現(xiàn)到頁面中后被調(diào)用。
router.afterEach((to,from) =>{ //第一個(gè)參數(shù)to,包含的內(nèi)容是切換后的路由對(duì)象,也就是跳轉(zhuǎn)后的路由對(duì)象 //第二個(gè)參數(shù)from,包含的內(nèi)容的是切換前的路由對(duì)象,也就是跳轉(zhuǎn)前的路由對(duì)象
實(shí)例代碼:
下面我寫的實(shí)例是當(dāng)時(shí)看網(wǎng)課尚硅谷老師教的,結(jié)合瀏覽器的Local Storage做出鑒權(quán)操作:
主要的就是src/store/index.js
文件中的配置src/store/index.js:
//該文件用于創(chuàng)建整個(gè)應(yīng)用的router //首先,需要引用vue-router import VueRouter from "vue-router"; //引入路由組件 import TestA from '../pages/TestA' import TestB from '../pages/TestB' // 引入二級(jí)路由組件 import TestBHzw from '../pages/TestBHzw' import TestBHyrz from '../pages/TestBHyrz' import DataList from '../pages/DataList' //創(chuàng)建并暴露一個(gè)VueRouter const router = new VueRouter({ routes:[ //配置路由路徑和路由組件 { //這里的路徑可自由定義,但是為了初學(xué)者好理解,我就采用和組件同樣的命名,防止在寫路徑的時(shí)候搞混 name:'導(dǎo)航一', path:'/TestA', component:TestA, //要跳轉(zhuǎn)到的組件 children:[ { // 給二級(jí)路由起名字 name:'DataName', path:'DataList/:introduce', //起到占位作用 component:DataList } ] }, { name:'導(dǎo)航二', path:'/TestB', component:TestB, meta:{isAuth:true,}, // 配置二級(jí)路由 children:[ { path:'TestBHzw', //重點(diǎn)注意,不要加 / component:TestBHzw }, { path:'TestBHyrz', component:TestBHyrz } ] } ] }) //全局前置路由,配合瀏覽器localStorage進(jìn)行鑒權(quán)操作 router.beforeEach((to, from, next) =>{ //首先,我們先看一看to和from參數(shù),next就是執(zhí)行的意思,不寫頁面是不會(huì)跳轉(zhuǎn)的 // console.log(to, from); if(to.meta.isAuth){ //判斷是否需要鑒權(quán) if(localStorage.getItem('name') === '張三'){ next(); }else{ alert('不好意思,姓名不對(duì),沒有權(quán)限'); } }else{ next() } }) // 全局后置路由,簡(jiǎn)單寫一個(gè)彈窗,在進(jìn)入每一個(gè)路由組件后彈出一句話 router.afterEach(() =>{ alert('歡迎你??!'); }) export default router;
TestA.vue:
<template> <div> <h4>著名動(dòng)漫簡(jiǎn)介</h4> <ul> <li v-for="i in DataList" :key="i.id"> <!-- 使用params參數(shù)傳遞動(dòng)態(tài)參數(shù) 注意:params傳遞參數(shù)必須配合name屬性--> <router-link :to="{ name:'DataName', params:{ introduce:i.introduce } }">{{i.name}}</router-link> </li> </ul> <router-view></router-view> </div> </template> <script> export default { name:'TestA', data(){ return{ DataList:[ { id:1, name:'《海賊王》', introduce:'《航海王》是日本漫畫家尾田榮一郎作畫的少年漫畫作品,于1997年7月22日在集英社《周刊少年Jump》開始連載。改編的電視動(dòng)畫《航海王》于1999年10月20日起在富士電視臺(tái)首播。' }, { id:2, name:'《火影忍者》', introduce:'電視動(dòng)畫《火影忍者》改編自日本漫畫家岸本齊史的同名漫畫,2002年10月3日在東京電視臺(tái)系列全6局、岐阜放送首播,共220話;第二季《火影忍者疾風(fēng)傳》于2007年2月15日-2017年3月23日在東京電視臺(tái)播出,共500話;累計(jì)全720話。' }, { id:3, name:'《斗破蒼穹》', introduce:'《斗破蒼穹》是一部由閱文集團(tuán)旗下起點(diǎn)中文網(wǎng)作家天蠶土豆同名玄幻長(zhǎng)篇經(jīng)典小說改編的動(dòng)畫。該動(dòng)畫第一季已于2017年1月7日在騰訊視頻上映,bilibili同步跟播,共十二集。' }, { id:4, name:'《鬼滅之刃》', introduce:'《鬼滅之刃》是日本漫畫家吾峠呼世晴所著的少年漫畫,自2016年2月15日—2020年5月11日在集英社《周刊少年Jump》上連載。已完結(jié)。' } ] } } } </script> <style scoped> h4{ text-align: center; } a{ text-decoration: none; } .active:visited{ color: brown; } </style>
TestB.vue:
<template> <div> <h4>我是內(nèi)容二</h4> <!-- 多級(jí)路由 --> <div class="box"> <!-- 此處路徑一定要寫完整路徑 --> <router-link to="/TestB/TestBHzw" active-class="active">點(diǎn)擊查看《海賊王的簡(jiǎn)介》</router-link> <router-link to="/TestB/TestBHyrz" active-class="active">點(diǎn)擊查看《火影忍者的簡(jiǎn)介》</router-link> <hr> <router-view></router-view> </div> </div> </template> <script> export default { name:'TestB', } </script> <style scoped> h4{ text-align: center; } .box{ text-align: center; } a{ text-decoration: none; } .active:visited{ color: brown; } </style>
DataList.vue:
<template> <div> <ul> <!-- 采用插值語法就可以拿到父級(jí)路由中的數(shù)據(jù) --> <li>{{$route.params.introduce}}</li> </ul> </div> </template> <script> export default { name:'DataList' } </script> <style> </style>
TestBHzw.vue和TestBHyrz.vue的結(jié)構(gòu)是一樣的,就不重復(fù)展示了:
<template> <div> <p> 電視動(dòng)畫《火影忍者》改編自日本漫畫家岸本齊史的同名漫畫, 2002年10月3日在東京電視臺(tái)系列全6局、岐阜放送首播,共220話; 第二季《火影忍者疾風(fēng)傳》于2007年2月15日-2017年3月23日在東京電視臺(tái)播出,共500話;累計(jì)全720話。 </p> </div> </template> <script> export default { name:'TestBHyrz' } </script> <style> </style>
當(dāng)然,想要配置路由守衛(wèi),前提就是把基本的路由配置好
因?yàn)椴还苁乔爸檬匦l(wèi)和后置守衛(wèi),都有三個(gè)參數(shù),netx()我們已經(jīng)說過,不寫的話不會(huì)往下一步走,
那么我們輸出一下to和from看看
當(dāng)前頁面是初始化頁面,所以此時(shí)輸出的to, from都是空對(duì)象。
當(dāng)我們點(diǎn)擊 “導(dǎo)航一” 時(shí),to里面有了新內(nèi)容,為什么from沒有呢,是因?yàn)槲覀兲幱谧铐攲映跏蓟撁妫谖覀凕c(diǎn)擊之前,我們是沒有路由的,所以只能捕獲到我們要去往哪一個(gè)路由組件,匹配不到我們來自哪一個(gè)路由組件
當(dāng)我們處于第一級(jí)路由的 “導(dǎo)航一” 跳往 “導(dǎo)航二” 時(shí),此時(shí)的to和from就顯而易見了
要想配合localStorage來實(shí)現(xiàn)鑒權(quán),我們就要先在瀏覽器中給他一對(duì)key—value
現(xiàn)在我們就可以把鑒權(quán)的操作寫在前置守衛(wèi)中了
后置守衛(wèi)就簡(jiǎn)單實(shí)現(xiàn)一下進(jìn)入組件后實(shí)現(xiàn)彈窗
此時(shí)我們切換到“導(dǎo)航二”組件時(shí),前置路由守衛(wèi)已經(jīng)拒絕了我們的訪問,那是因?yàn)槲以阼b權(quán)操作中,匹配的名字是“張三”
把名字改為“王五”后,我們可以正常訪問“導(dǎo)航二”組件了
獨(dú)享守衛(wèi)
組件獨(dú)享守衛(wèi)是在進(jìn)入組件時(shí)被調(diào)用,區(qū)別就在于,想對(duì)那個(gè)路由進(jìn)行權(quán)限控制就直接在其路由配置項(xiàng)中添加守衛(wèi),作用域也僅限于該路由
beforeEnter(to,from,next){ //第一個(gè)參數(shù)to,包含的內(nèi)容是切換后的路由對(duì)象,也就是跳轉(zhuǎn)后的路由對(duì)象 //第二個(gè)參數(shù)from,包含的內(nèi)容的是切換前的路由對(duì)象,也就是跳轉(zhuǎn)前的路由對(duì)象 //第三個(gè)參數(shù)next(),是否往下執(zhí)行,執(zhí)行的話,如果不寫的話路由就不會(huì)跳轉(zhuǎn),操作將會(huì)終止 }
可自行去嘗試,其實(shí)效果都是一樣的,只不過,全局路由守衛(wèi)服務(wù)的是所有路由組件,而獨(dú)享路由守衛(wèi)只服務(wù)于被配置的單個(gè)路由組件
組件內(nèi)守衛(wèi)
當(dāng)使用路由規(guī)則進(jìn)入該組件或離開該組件時(shí),就會(huì)觸發(fā)組件內(nèi)守衛(wèi)的調(diào)用,而組件內(nèi)守衛(wèi)的作用于范圍也僅限于該組件
//進(jìn)入守衛(wèi):通過路由規(guī)則,進(jìn)入該組件時(shí)被調(diào)用 beforeRouteEnter (to, from, next) { //第一個(gè)參數(shù)to,包含的內(nèi)容是切換后的路由對(duì)象,也就是跳轉(zhuǎn)后的路由對(duì)象 //第二個(gè)參數(shù)from,包含的內(nèi)容的是切換前的路由對(duì)象,也就是跳轉(zhuǎn)前的路由對(duì)象 //第三個(gè)參數(shù)next(),是否往下執(zhí)行,執(zhí)行的話,如果不寫的話路由就不會(huì)跳轉(zhuǎn),操作將會(huì)終止 }, //離開守衛(wèi):通過路由規(guī)則,離開該組件時(shí)被調(diào)用 beforeRouteLeave (to, from, next) { //第一個(gè)參數(shù)to,包含的內(nèi)容是切換后的路由對(duì)象,也就是跳轉(zhuǎn)后的路由對(duì)象 //第二個(gè)參數(shù)from,包含的內(nèi)容的是切換前的路由對(duì)象,也就是跳轉(zhuǎn)前的路由對(duì)象 //第三個(gè)參數(shù)next(),是否往下執(zhí)行,執(zhí)行的話,如果不寫的話路由就不會(huì)跳轉(zhuǎn),操作將會(huì)終止 }
唯一不同于之前的就是
BeforeRouterLeave(),它并不像全局后置守衛(wèi)一樣在路由組件加載完成之后調(diào)用,而是在你切換出這個(gè)組件后被調(diào)用,也就是離開這個(gè)組件后被調(diào)用,在開發(fā)中,我們也可以使用BeforeRouterLeave() 來完成某些操作,比如當(dāng)我要切換出該組件事,我希望該組件的操作能暫停,而不是一直運(yùn)行,只有當(dāng)我切換回該組件時(shí),又再次運(yùn)行,這樣的操作就可以配合著beforeRouteEnter() 來完成,也可以提高應(yīng)用的性能
總結(jié)
路由守衛(wèi)在實(shí)際開發(fā)過程中是一個(gè)較為重要的知識(shí)點(diǎn),其作用和功能在實(shí)際開發(fā)中也大大方便了我們的開發(fā),在對(duì)用戶鑒權(quán)操作時(shí)也提高了我們編寫代碼的小效率,以上就是我個(gè)人在學(xué)習(xí)時(shí)對(duì)路由守衛(wèi)的理解和筆記。
到此這篇關(guān)于Vue路由守衛(wèi)案例代碼的文章就介紹到這了,更多相關(guān)Vue路由守衛(wèi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel問題詳解
這篇文章主要介紹了Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel問題詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02vue 和vue-touch 實(shí)現(xiàn)移動(dòng)端左右導(dǎo)航效果(仿京東移動(dòng)站導(dǎo)航)
這篇文章主要介紹了vue 和vue-touch 實(shí)現(xiàn)移動(dòng)端左右導(dǎo)航效果(仿京東移動(dòng)站導(dǎo)航),需要的朋友可以參考下2017-04-04Vue模板語法中數(shù)據(jù)綁定的實(shí)例代碼
這篇文章主要介紹了Vue模板語法中數(shù)據(jù)綁定的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05vue項(xiàng)目打包之開發(fā)環(huán)境和部署環(huán)境的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目打包之開發(fā)環(huán)境和部署環(huán)境的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解
今天小編就為大家分享一篇在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09