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)文章
Vue使用Axios庫(kù)請(qǐng)求數(shù)據(jù)時(shí)跨域問(wèn)題的解決方法詳解
在 VUE 項(xiàng)目開(kāi)發(fā)時(shí),遇到個(gè)問(wèn)題,正常設(shè)置使用 Axios 庫(kù)請(qǐng)求數(shù)據(jù)時(shí),報(bào)錯(cuò)提示跨域問(wèn)題,那在生產(chǎn)壞境下,該去怎么解決呢?下面小編就來(lái)和大家詳細(xì)講講2024-01-01
vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)完整代碼
作為一個(gè)AI模型,人臉識(shí)別涉及到多個(gè)技術(shù)領(lǐng)域,下面這篇文章主要給大家介紹了關(guān)于vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁(yè)面,前面加默認(rèn)域名端口的問(wèn)題
這篇文章主要介紹了解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁(yè)面,前面加默認(rèn)域名端口的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實(shí)戰(zhàn)案例
我們經(jīng)常需要在Vue搭建的后臺(tái)管理系統(tǒng)里進(jìn)行數(shù)據(jù)導(dǎo)入導(dǎo)出等操作,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實(shí)戰(zhàn)案例的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue vantUI tab切換時(shí) list組件不觸發(fā)load事件的問(wèn)題及解決方法
這篇文章主要介紹了vue vantUI tab切換時(shí) list組件不觸發(fā)load事件的解決辦法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
使用vue實(shí)現(xiàn)grid-layout功能實(shí)例代碼
這篇文章主要介紹了使用vue實(shí)現(xiàn)grid-layout功能的代碼講解,需要的朋友可以參考下2018-01-01

