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

Vue Router路由守衛(wèi)超詳細(xì)介紹

 更新時間：2023年01月28日 09:10:46   作者：小五ccc  
路由守衛(wèi)，簡單理解來說就是，當(dāng)用戶要進(jìn)行一些操作時，我需要用戶的一些信息或數(shù)據(jù)或行為，我判斷過后，才會同意用戶進(jìn)行操作，說到這里，我想大家心里都或多或少有點(diǎn)理解了吧

全局前置&后置路由守衛(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;

說明

① router.beforeEach()是全局前置路由守衛(wèi)

② router.afterEach()是全局后置路由守衛(wèi)

③ to：目的地路由信息

④ from: 出發(fā)地路由信息

⑤ next：是個函數(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) => {}
		}]
	}]
});

說明

① 組件內(nèi)部的beforeEnter()是獨(dú)享前置路由守衛(wèi)

② 獨(dú)享路由守衛(wèi)只有前置沒有后置

③ 獨(dú)享路由守衛(wèi)與全局路由守衛(wèi)可一起搭配使用

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

Detail組件

<template>
	<div></div>
</template>
<script>
export default {
	name: 'Detail',
	// 通過路由，進(jìn)入組件之前調(diào)用
	beforeRouteEnter(to, from, next) {},
	// 通過路由，離開組件之前調(diào)用
	beforeRouteLeave(to, from, next) {}
}
</script>

說明

① beforeRouteEnter()，通過路由，進(jìn)入組件之前被調(diào)用

② beforeRouteLeave()，通過路由，離開組件之前被調(diào)用

③ 兩者都需要調(diào)用next()放行

到此這篇關(guān)于Vue Router路由守衛(wèi)超詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Vue Router路由守衛(wèi)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論