前言：

在編寫(xiě)vue里的登錄注冊(cè)時(shí)，我們始終繞不開(kāi)對(duì)導(dǎo)航守衛(wèi)的使用，vue-router4.0版里有一些重要更新，在這里分享給大家。

一、什么是導(dǎo)航守衛(wèi)？

正如其名，vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中：全局的，單個(gè)路由獨(dú)享的，或者組件級(jí)的。

查看以下情形：

點(diǎn)擊主頁(yè)鏈接時(shí)，默認(rèn)情況下可直接進(jìn)入指定界面，如圖，但是問(wèn)題是該跳轉(zhuǎn)的界面是需要用戶登錄后方可訪問(wèn)的

可設(shè)置導(dǎo)航守衛(wèi)來(lái)檢測(cè)用戶是否登錄，如果已登錄，則進(jìn)入后臺(tái)頁(yè)，如果未登錄，則強(qiáng)制進(jìn)入登錄頁(yè)，如圖

二、導(dǎo)航守衛(wèi)有哪幾種？

1、全局守衛(wèi)（3個(gè)）

全局前置守衛(wèi)

每次發(fā)生路由的導(dǎo)航跳轉(zhuǎn)時(shí)，都會(huì)觸發(fā)全局前置守衛(wèi)，因此，在全局前置守衛(wèi)中，程序員可以對(duì)每個(gè)路由進(jìn)行訪問(wèn)權(quán)限的控制

1、 使用方式

你可以在 router/index.js 頁(yè)面中使用 router.beforeEach((to, from, next) => {}) 注冊(cè)一個(gè)全局前置守衛(wèi)。

2、 代碼：

// router/index.js 頁(yè)面

router.beforeEach((to, from, next) => {
    console.log(to, from);
    next()
});

全局解析守衛(wèi)

1、 使用方式
你可以用 router.beforeResolve 注冊(cè)一個(gè)全局守衛(wèi)。這和 router.beforeEach 類似，因?yàn)樗?每次導(dǎo)航時(shí)都會(huì)觸發(fā)，但是確保在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被正確調(diào)用。

2、 代碼：

// router/index.js 頁(yè)面

router.beforeResolve((to, from, next) => {
    console.log(to,from);
    next()
})

全局后置鉤子

1、 使用方式
你也可以注冊(cè)全局后置鉤子，然而和守衛(wèi)不同的是，這些鉤子不會(huì)接受 next 函數(shù)也不會(huì)改變導(dǎo)航本身：

2、 代碼：

// router/index.js 頁(yè)面

router.afterEach((to, from) => {
    console.log(to,from);
})

它們對(duì)于分析、更改頁(yè)面標(biāo)題、聲明頁(yè)面等輔助功能以及許多其他事情都很有用。

2、路由獨(dú)享守衛(wèi)（1個(gè)）

1、 使用方式

你可以直接在路由配置上定義 beforeEnter 守衛(wèi)：

2、 代碼：

// router/index.js 頁(yè)面（路由規(guī)則中）

const routes = [
	{
	    path: '/home',
	    name: 'Home',
	    component: HomeView,
	    beforeEnter: (to, from,next) => {
	        console.log(to, from);
	        next()
	    },
	}, 
]

3、組件內(nèi)守衛(wèi)（3個(gè)）

組件內(nèi)守衛(wèi)有個(gè)三個(gè)：路由進(jìn)入之前beforeRouteEnter，路由離開(kāi)時(shí)beforeRouteLeave,頁(yè)面更新時(shí)beforeRouteUpdate

beforeRouteEnter(to, from, next)

1、 使用方式
在組件模板中使用,跟methods: {}等同級(jí)別書(shū)寫(xiě)，組件路由守衛(wèi)是寫(xiě)在每個(gè)單獨(dú)的vue文件里面的路由守衛(wèi)

2、 代碼：

// vue 組件內(nèi)使用

onBeforeRouteUpdate((to, from) => {
  //當(dāng)前組件路由改變后，進(jìn)行觸發(fā)
  console.log(to);
});

注意：在 vue3 中的 setup 函數(shù)中是不可以使用 beforeRouterEnter 這個(gè)路由守衛(wèi)的

beforeRouteUpdate(to, from, next)

1、 使用方式
在組件模板中使用,跟 methods: {} 等同級(jí)別書(shū)寫(xiě)，組件路由守衛(wèi)是寫(xiě)在每個(gè)單獨(dú)的 vue 文件里面的路由守衛(wèi)

2、 代碼：

// vue 組件內(nèi)使用

onBeforeRouteUpdate((to, from) => {
  //當(dāng)前組件路由改變后，進(jìn)行觸發(fā)
  console.log(to);
});

beforeRouteLeave(to, from, next)

1、 使用方式 在組件模板中使用, 跟methods: {} 等同級(jí)別書(shū)寫(xiě)，組件路由守衛(wèi)是寫(xiě)在每個(gè)單獨(dú)的 vue 文件里面的路由守衛(wèi)

2、 代碼：

// vue 組件內(nèi)使用

onBeforeRouteLeave((to, from) => {
  //離開(kāi)當(dāng)前的組件，觸發(fā)
  alert("我離開(kāi)啦");
});

三、導(dǎo)航守衛(wèi)的三個(gè)參數(shù)

• to：將要訪問(wèn)的路由信息對(duì)象
• from：將要離開(kāi)的路由信息對(duì)象
• next：函數(shù)

  調(diào)用next()表示放行，允許這次路由導(dǎo)航

  調(diào)用next(false)表示不放行，不允許此次路由導(dǎo)航

  調(diào)用next({routerPath})表示導(dǎo)航到此地址，一般情況用戶未登錄時(shí)，會(huì)導(dǎo)航到登陸界面

提示：該函數(shù)在導(dǎo)航守衛(wèi)中可出現(xiàn)多次，但是只能被調(diào)用一次!!!

四、如何在 vue3 中使用 beforeRouteEnter

如果你正在使用組合 API 和 setup 函數(shù)來(lái)編寫(xiě)組件，你可以通過(guò) onBeforeRouteUpdate 和 onBeforeRouteLeave 分別添加 update 和 leave 守衛(wèi)。 請(qǐng)參考組合 API 部分以獲得更多細(xì)節(jié)。

具體請(qǐng)看vue-router的官方文檔
導(dǎo)航守衛(wèi) | Vue Router

方法一、我們可以在設(shè)置路由的時(shí)候，使用beforeEnter方法攔截，即在router.js中：

{
	path: '/',
	name: 'home
	component: () => import('@/xxx.vue'),
	beforeEnter: (to, from) => {
		// 可以在定義路由的時(shí)候監(jiān)聽(tīng)from和to
	}
}

方法二、我們還可以使用vue2的寫(xiě)法，使用選項(xiàng)式api，就可以使用beforeRouterEnter這個(gè)鉤子了

<script>
export default {
	beforeRouteEnter(to, from) {
		console.log('before router enter', to, from)
	},
	mounted() {
		console.log('mounted')
	},
}

五、模擬登錄注冊(cè)案例

// 模擬是否登錄（true為登錄，false為未登錄）
let token = true
router.beforeEach((to, from, next) => {
    // 判斷有沒(méi)有登錄
    if (!token) {
    	// 如果沒(méi)有登錄，并且是跳轉(zhuǎn)至登錄頁(yè)
        if (to.name == "Login") {
        	// 直接跳轉(zhuǎn)
            next();
        } else {
        	// 否則直接強(qiáng)制跳轉(zhuǎn)至登錄頁(yè)
            router.push('/login')
        }
    } else {
    	// 如果已經(jīng)登錄，并且不是跳轉(zhuǎn)至登錄頁(yè)
        if (to.name !== "Login") {
        	// 直接跳轉(zhuǎn)
            next();
        } else {
        	// 否則直接強(qiáng)制跳轉(zhuǎn)至上一個(gè)頁(yè)面
            router.push(from.path)
        }
    }
});

總結(jié)：

到此這篇關(guān)于Vue3中導(dǎo)航守衛(wèi)的基本使用方法的文章就介紹到這了,更多相關(guān)Vue3導(dǎo)航守衛(wèi)使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論