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

更新時間：2023年02月02日 10:38:39 作者：小田『開心館』

在Vue中，路由守衛(wèi)分為三種：全局路由守衛(wèi)、獨享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi)，本文重點介紹Vue路由守衛(wèi)案例代碼,需要的朋友可以參考下

Vue路由守衛(wèi)

路由守衛(wèi)，簡單理解來說就是，當用戶要進行一些操作時，我需要用戶的一些信息或數(shù)據(jù)或行為，我判斷過后，才會同意用戶進行操作，說到這里，我想大家心里都或多或少有點理解了吧，官方一點的解釋就是進行操作的鑒權(quán)，當操作與之條件匹配時，操作成功，當操作與之不匹配時，操作終止，作用就是是對路由進行權(quán)限控制。

在Vue中，路由守衛(wèi)分為三種：全局路由守衛(wèi)、獨享路由守衛(wèi)以及組件內(nèi)路由守衛(wèi)

全局路由守衛(wèi)

全局路由守衛(wèi)，顧名思義，一旦配置，那么作用范圍就是所有的路由，全局路由又分為全局前置守衛(wèi)和全局后置守衛(wèi)

全局前置守衛(wèi)

全局前置守衛(wèi)，組件初始化時調(diào)用，每次路由切換之前調(diào)用，路由切換之前指的就是，舉個例子說，當前我在A路由組件，我要切換到B路由組件，那么前置路由守衛(wèi)就是在我點了切換按鈕，但B路由組件還沒有被呈現(xiàn)在頁面上的時候被調(diào)用。

//全局前置守衛(wèi)
router.beforeEach((to,from,next) =>{
  //第一個參數(shù)to，包含的內(nèi)容是切換后的路由對象，也就是跳轉(zhuǎn)后的路由對象
  //第二個參數(shù)from，包含的內(nèi)容的是切換前的路由對象，也就是跳轉(zhuǎn)前的路由對象
  //第三個參數(shù)next()，是否往下執(zhí)行，執(zhí)行的話，如果不寫的話路由就不會跳轉(zhuǎn)，操作將會終止
})

全局后置守衛(wèi)

全局后置守衛(wèi)，組件初始化時調(diào)用，每次路由切換之后調(diào)用，路由切換之后指的就是，舉個例子說，當前我在A路由組件，我要切換到B路由組件，那么前置路由守衛(wèi)就是在我點了切換按鈕B路由組件呈現(xiàn)到頁面中后被調(diào)用。

router.afterEach((to,from) =>{
  //第一個參數(shù)to，包含的內(nèi)容是切換后的路由對象，也就是跳轉(zhuǎn)后的路由對象
  //第二個參數(shù)from，包含的內(nèi)容的是切換前的路由對象，也就是跳轉(zhuǎn)前的路由對象

實例代碼：

下面我寫的實例是當時看網(wǎng)課尚硅谷老師教的，結(jié)合瀏覽器的Local Storage做出鑒權(quán)操作：
主要的就是src/store/index.js文件中的配置
src/store/index.js：

//該文件用于創(chuàng)建整個應(yīng)用的router
//首先，需要引用vue-router
import VueRouter from "vue-router";

//引入路由組件
import TestA from '../pages/TestA'
import TestB from '../pages/TestB'
// 引入二級路由組件
import TestBHzw from '../pages/TestBHzw'
import TestBHyrz from '../pages/TestBHyrz'

import DataList from '../pages/DataList'

//創(chuàng)建并暴露一個VueRouter
const router =  new VueRouter({
    routes:[
        //配置路由路徑和路由組件
        {
            //這里的路徑可自由定義，但是為了初學(xué)者好理解，我就采用和組件同樣的命名，防止在寫路徑的時候搞混
            name:'導(dǎo)航一',
            path:'/TestA',
            component:TestA,     //要跳轉(zhuǎn)到的組件   
            children:[
                {
                    // 給二級路由起名字
                    name:'DataName',
                    path:'DataList/:introduce',     //起到占位作用
                    component:DataList
                }
            ]
        },
        {
            name:'導(dǎo)航二',
            path:'/TestB',
            component:TestB,
            meta:{isAuth:true,},
            // 配置二級路由
            children:[
                {
                    path:'TestBHzw',     //重點注意，不要加 /
                    component:TestBHzw
                },
                {
                    path:'TestBHyrz',
                    component:TestBHyrz
                }
            ]
        }
    ]
})

//全局前置路由，配合瀏覽器localStorage進行鑒權(quán)操作
router.beforeEach((to, from, next) =>{
    //首先，我們先看一看to和from參數(shù)，next就是執(zhí)行的意思，不寫頁面是不會跳轉(zhuǎn)的
    // console.log(to, from);
    if(to.meta.isAuth){     //判斷是否需要鑒權(quán)
        if(localStorage.getItem('name') === '張三'){
            next();
        }else{
            alert('不好意思，姓名不對，沒有權(quán)限');
        }
    }else{
        next()
    }
})

// 全局后置路由，簡單寫一個彈窗，在進入每一個路由組件后彈出一句話
router.afterEach(() =>{
    alert('歡迎你??！');
})

export default router;

TestA.vue:

<template>
  <div>
    <h4>著名動漫簡介</h4>
    <ul>
      <li v-for="i in DataList" :key="i.id">
        <!-- 使用params參數(shù)傳遞動態(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》開始連載。改編的電視動畫《航海王》于1999年10月20日起在富士電視臺首播。'
          },
          {
            id:2,
            name:'《火影忍者》',
            introduce:'電視動畫《火影忍者》改編自日本漫畫家岸本齊史的同名漫畫，2002年10月3日在東京電視臺系列全6局、岐阜放送首播，共220話；第二季《火影忍者疾風傳》于2007年2月15日－2017年3月23日在東京電視臺播出，共500話；累計全720話。'
          },
          {
            id:3,
            name:'《斗破蒼穹》',
            introduce:'《斗破蒼穹》是一部由閱文集團旗下起點中文網(wǎng)作家天蠶土豆同名玄幻長篇經(jī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>
    <!-- 多級路由 -->
    <div class="box">
      <!-- 此處路徑一定要寫完整路徑 -->
      <router-link to="/TestB/TestBHzw" active-class="active">點擊查看《海賊王的簡介》</router-link>&nbsp;&nbsp;&nbsp;
      <router-link to="/TestB/TestBHyrz" active-class="active">點擊查看《火影忍者的簡介》</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>
          <!-- 采用插值語法就可以拿到父級路由中的數(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>
      電視動畫《火影忍者》改編自日本漫畫家岸本齊史的同名漫畫，
      2002年10月3日在東京電視臺系列全6局、岐阜放送首播，共220話；
      第二季《火影忍者疾風傳》于2007年2月15日－2017年3月23日在東京電視臺播出，共500話；累計全720話。
    </p>
  </div>
</template>

<script>
export default {
    name:'TestBHyrz'
}
</script>

<style>

</style>

當然，想要配置路由守衛(wèi)，前提就是把基本的路由配置好

因為不管是前置守衛(wèi)和后置守衛(wèi)，都有三個參數(shù)，netx()我們已經(jīng)說過，不寫的話不會往下一步走，
那么我們輸出一下to和from看看
當前頁面是初始化頁面，所以此時輸出的to, from都是空對象。

在這里插入圖片描述

當我們點擊 “導(dǎo)航一” 時，to里面有了新內(nèi)容，為什么from沒有呢，是因為我們處于最頂層初始化頁面，在我們點擊之前，我們是沒有路由的，所以只能捕獲到我們要去往哪一個路由組件，匹配不到我們來自哪一個路由組件

在這里插入圖片描述

當我們處于第一級路由的 “導(dǎo)航一” 跳往 “導(dǎo)航二” 時，此時的to和from就顯而易見了

在這里插入圖片描述

要想配合localStorage來實現(xiàn)鑒權(quán)，我們就要先在瀏覽器中給他一對key—value

在這里插入圖片描述

現(xiàn)在我們就可以把鑒權(quán)的操作寫在前置守衛(wèi)中了

在這里插入圖片描述

后置守衛(wèi)就簡單實現(xiàn)一下進入組件后實現(xiàn)彈窗

在這里插入圖片描述

此時我們切換到“導(dǎo)航二”組件時，前置路由守衛(wèi)已經(jīng)拒絕了我們的訪問，那是因為我在鑒權(quán)操作中，匹配的名字是“張三”

在這里插入圖片描述

把名字改為“王五”后，我們可以正常訪問“導(dǎo)航二”組件了

在這里插入圖片描述

獨享守衛(wèi)

組件獨享守衛(wèi)是在進入組件時被調(diào)用,區(qū)別就在于，想對那個路由進行權(quán)限控制就直接在其路由配置項中添加守衛(wèi)，作用域也僅限于該路由

beforeEnter(to,from,next){
  //第一個參數(shù)to，包含的內(nèi)容是切換后的路由對象，也就是跳轉(zhuǎn)后的路由對象
  //第二個參數(shù)from，包含的內(nèi)容的是切換前的路由對象，也就是跳轉(zhuǎn)前的路由對象
  //第三個參數(shù)next()，是否往下執(zhí)行，執(zhí)行的話，如果不寫的話路由就不會跳轉(zhuǎn)，操作將會終止
}

可自行去嘗試，其實效果都是一樣的，只不過，全局路由守衛(wèi)服務(wù)的是所有路由組件，而獨享路由守衛(wèi)只服務(wù)于被配置的單個路由組件

組件內(nèi)守衛(wèi)

當使用路由規(guī)則進入該組件或離開該組件時，就會觸發(fā)組件內(nèi)守衛(wèi)的調(diào)用，而組件內(nèi)守衛(wèi)的作用于范圍也僅限于該組件

//進入守衛(wèi)：通過路由規(guī)則，進入該組件時被調(diào)用
beforeRouteEnter (to, from, next) {
  //第一個參數(shù)to，包含的內(nèi)容是切換后的路由對象，也就是跳轉(zhuǎn)后的路由對象
  //第二個參數(shù)from，包含的內(nèi)容的是切換前的路由對象，也就是跳轉(zhuǎn)前的路由對象
  //第三個參數(shù)next()，是否往下執(zhí)行，執(zhí)行的話，如果不寫的話路由就不會跳轉(zhuǎn)，操作將會終止
},
//離開守衛(wèi)：通過路由規(guī)則，離開該組件時被調(diào)用
beforeRouteLeave (to, from, next) {
  //第一個參數(shù)to，包含的內(nèi)容是切換后的路由對象，也就是跳轉(zhuǎn)后的路由對象
  //第二個參數(shù)from，包含的內(nèi)容的是切換前的路由對象，也就是跳轉(zhuǎn)前的路由對象
  //第三個參數(shù)next()，是否往下執(zhí)行，執(zhí)行的話，如果不寫的話路由就不會跳轉(zhuǎn)，操作將會終止
}

唯一不同于之前的就是
BeforeRouterLeave(),它并不像全局后置守衛(wèi)一樣在路由組件加載完成之后調(diào)用，而是在你切換出這個組件后被調(diào)用，也就是離開這個組件后被調(diào)用，在開發(fā)中，我們也可以使用BeforeRouterLeave() 來完成某些操作，比如當我要切換出該組件事，我希望該組件的操作能暫停，而不是一直運行，只有當我切換回該組件時，又再次運行，這樣的操作就可以配合著beforeRouteEnter() 來完成，也可以提高應(yīng)用的性能