Vue Router路由守衛(wèi)超詳細介紹
更新時間：2023年01月28日 09:10:46 作者：小五ccc
路由守衛(wèi)，簡單理解來說就是，當用戶要進行一些操作時，我需要用戶的一些信息或數(shù)據(jù)或行為，我判斷過后，才會同意用戶進行操作，說到這里，我想大家心里都或多或少有點理解了吧
全局前置&后置路由守衛(wèi)
router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import List from '@/pages/List'
Vue.use(VueRouter);
const router = new VueRouter({
routes: [{
path: '/list',
component: List,
meta: { // 路由元數(shù)據(jù)
title: '列表'
... // 可自定義配置參數(shù)
}
}]
});
// 前置：在路由切換之前調用
router.beforeEach((to, from, next) => {});
// 后置：在路由切換成功之后調用
router.afterEach((to, from) => {});
export default router;
說明
① router.beforeEach()是全局前置路由守衛(wèi)
② router.afterEach()是全局后置路由守衛(wèi)
③ to：目的地路由信息
④ from: 出發(fā)地路由信息
⑤ next：是個函數(shù)，只有調用next()，路由器才可繼續(xù)跳轉，不調用直接攔截
⑥ routes中的meta配置項，可配置一些自定義的參數(shù)
獨享路由守衛(wèi)
router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import List from '@/pages/List';
import Detail from '@/pages/Detail';
Vue.use(VueRouter);
export default new VueRouter({
routes: [{
path: '/list',
component: List,
children: [{
path: 'detail',
component: Detail,
// Detail組件獨享此路由守衛(wèi)
beforeEnter: (to, from, next) => {}
}]
}]
});
說明
① 組件內部的beforeEnter()是獨享前置路由守衛(wèi)
② 獨享路由守衛(wèi)只有前置沒有后置
③ 獨享路由守衛(wèi)與全局路由守衛(wèi)可一起搭配使用
組件內路由守衛(wèi)
Detail組件
<template>
<div></div>
</template>
<script>
export default {
name: 'Detail',
// 通過路由，進入組件之前調用
beforeRouteEnter(to, from, next) {},
// 通過路由，離開組件之前調用
beforeRouteLeave(to, from, next) {}
}
</script>
說明
① beforeRouteEnter()，通過路由，進入組件之前被調用
② beforeRouteLeave()，通過路由，離開組件之前被調用
③ 兩者都需要調用next()放行
到此這篇關于Vue Router路由守衛(wèi)超詳細介紹的文章就介紹到這了,更多相關Vue Router路由守衛(wèi)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
我們在做了用戶登錄后,就會讓用戶跳轉到個人中心,下面這篇文章主要給大家介紹了關于如何使用Vue+Element做個個人中心的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)純前端表格滾動分頁加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
詳細聊聊前端如何實現(xiàn)token無感刷新(refresh_token)
實現(xiàn)token無感刷新對于前端來說是一項非常常用的技術,其本質是為了優(yōu)化用戶體驗,下面這篇文章主要給大家介紹了關于前端如何實現(xiàn)token無感刷新(refresh_token)的相關資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue3中正確使用ElementPlus的示例代碼,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了在vue2中如何處理xml格式的數(shù)據(jù),文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-03-03
使用Vue Composition API寫出清晰、可擴展的表單實現(xiàn)
這篇文章主要介紹了使用Vue Composition API寫出清晰、可擴展的表單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要介紹了mpvue 單文件頁面配置詳解，本文將介紹如何在 mpvue 官方模板的基礎上，通過配置 mpvue-config-loader 來實現(xiàn)在 vue 文件內書寫小程序的頁面配置，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了Vue 實現(xiàn)前端權限控制的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
Axios是在前端開發(fā)中常用的一個發(fā)送 HTTP 請求的庫，用過的都知道,篇文章主要給大家介紹了關于vue的相關資料,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細介紹了vue組件實現(xiàn)移動端九宮格轉盤抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10