欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue路由守衛(wèi)案例代碼

 更新時(shí)間:2023年02月02日 10:38:39   作者:小田『開心館』  
在Vue中,路由守衛(wèi)分為三種:全局路由守衛(wèi)、獨(dú)享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi),本文重點(diǎn)介紹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>&nbsp;&nbsp;&nbsp;
      <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)文章

最新評(píng)論