Vue Router路由守衛(wèi)超詳細(xì)介紹
全局前置&后置路由守衛(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ù)
}
}]
});
// 前置：在路由切換之前調(diào)用
router.beforeEach((to, from, next) => {});
// 后置：在路由切換成功之后調(diào)用
router.afterEach((to, from) => {});
export default router;
說(shuō)明
① router.beforeEach()是全局前置路由守衛(wèi)
② router.afterEach()是全局后置路由守衛(wèi)
③ to：目的地路由信息
④ from: 出發(fā)地路由信息
⑤ next：是個(gè)函數(shù)，只有調(diào)用next()，路由器才可繼續(xù)跳轉(zhuǎn)，不調(diào)用直接攔截
⑥ routes中的meta配置項(xiàng)，可配置一些自定義的參數(shù)
獨(dú)享路由守衛(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組件獨(dú)享此路由守衛(wèi)
beforeEnter: (to, from, next) => {}
}]
}]
});
說(shuō)明
① 組件內(nèi)部的beforeEnter()是獨(dú)享前置路由守衛(wèi)
② 獨(dú)享路由守衛(wèi)只有前置沒(méi)有后置
③ 獨(dú)享路由守衛(wèi)與全局路由守衛(wèi)可一起搭配使用
組件內(nèi)路由守衛(wèi)
Detail組件
<template>
<div></div>
</template>
<script>
export default {
name: 'Detail',
// 通過(guò)路由，進(jìn)入組件之前調(diào)用
beforeRouteEnter(to, from, next) {},
// 通過(guò)路由，離開(kāi)組件之前調(diào)用
beforeRouteLeave(to, from, next) {}
}
</script>
說(shuō)明
① beforeRouteEnter()，通過(guò)路由，進(jìn)入組件之前被調(diào)用
② beforeRouteLeave()，通過(guò)路由，離開(kāi)組件之前被調(diào)用
③ 兩者都需要調(diào)用next()放行
到此這篇關(guān)于Vue Router路由守衛(wèi)超詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Vue Router路由守衛(wèi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
我們?cè)谧隽擞脩舻卿浐?就會(huì)讓用戶跳轉(zhuǎn)到個(gè)人中心,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue+Element做個(gè)個(gè)人中心的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue實(shí)現(xiàn)純前端表格滾動(dòng)分頁(yè)加載
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)純前端表格滾動(dòng)分頁(yè)加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳細(xì)聊聊前端如何實(shí)現(xiàn)token無(wú)感刷新(refresh_token)
實(shí)現(xiàn)token無(wú)感刷新對(duì)于前端來(lái)說(shuō)是一項(xiàng)非常常用的技術(shù),其本質(zhì)是為了優(yōu)化用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于前端如何實(shí)現(xiàn)token無(wú)感刷新(refresh_token)的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue3中正確使用ElementPlus的示例代碼,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了在vue2中如何處理xml格式的數(shù)據(jù),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2024-03-03
使用Vue Composition API寫(xiě)出清晰、可擴(kuò)展的表單實(shí)現(xiàn)
這篇文章主要介紹了使用Vue Composition API寫(xiě)出清晰、可擴(kuò)展的表單實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了mpvue 單文件頁(yè)面配置詳解，本文將介紹如何在 mpvue 官方模板的基礎(chǔ)上，通過(guò)配置 mpvue-config-loader 來(lái)實(shí)現(xiàn)在 vue 文件內(nèi)書(shū)寫(xiě)小程序的頁(yè)面配置，感興趣的小伙伴們可以參考一下2018-12-12
Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼
這篇文章主要介紹了Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Axios是在前端開(kāi)發(fā)中常用的一個(gè)發(fā)送 HTTP 請(qǐng)求的庫(kù)，用過(guò)的都知道,篇文章主要給大家介紹了關(guān)于vue的相關(guān)資料,需要的朋友可以參考下2021-10-10
vue組件實(shí)現(xiàn)移動(dòng)端九宮格轉(zhuǎn)盤(pán)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)移動(dòng)端九宮格轉(zhuǎn)盤(pán)抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10