您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)vue-router導(dǎo)航守衛(wèi)的示例分析,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
當(dāng)做Vue-cli項(xiàng)目的時(shí)候需要在路由跳轉(zhuǎn)前做一些驗(yàn)證,比如登錄驗(yàn)證,是網(wǎng)站中的普遍需求。
對(duì)此,vue-router 提供的 beforeEach可以方便地實(shí)現(xiàn)全局導(dǎo)航守衛(wèi)(navigation-guards)。組件內(nèi)部的導(dǎo)航守衛(wèi)函數(shù)使用相同,只是函數(shù)名稱不同(beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave)。
鉤子(Hook),早期編程可能有個(gè)概念叫句柄,不知道將兩者類比而且強(qiáng)行歸為一類是不是合適。鉤子的用處是在某個(gè)特定流程中的不同時(shí)機(jī)暴露出一些函數(shù),使得用戶可以通過(guò)覆寫這些函數(shù)實(shí)現(xiàn)在原有位置執(zhí)行自己的代碼邏輯的功能。
1. 分類
vue-router中的導(dǎo)航鉤子按定義位置不同(執(zhí)行時(shí)機(jī)也不同)分為全局鉤子、路由級(jí)鉤子和組件級(jí)鉤子。
全局鉤子
全局鉤子有三個(gè),分別是beforeEach、beforeResolve和afterEach,在路由實(shí)例對(duì)象注冊(cè)使用;
路由級(jí)鉤子
路由級(jí)鉤子有beforeEnter,在路由配置項(xiàng)中項(xiàng)定義;
組件級(jí)鉤子
組件級(jí)鉤子有beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave,在組件屬性中定義;
官方文檔地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
如何設(shè)置一個(gè)全局守衛(wèi)
你可以使用 router.beforeEach 注冊(cè)一個(gè)全局前置守衛(wèi):就是在你router配置的下方注冊(cè)
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí),全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行,此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中。
每個(gè)守衛(wèi)方法接收三個(gè)參數(shù):
to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。
next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了(可能是用戶手動(dòng)或者瀏覽器后退按鈕),那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。
next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向 next 傳遞任意位置對(duì)象,且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項(xiàng)以及任何用在 router-link 的 to prop 或 router.push 中的選項(xiàng)。
next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例,則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過(guò)的回調(diào)。
確保要調(diào)用 next 方法,否則鉤子就不會(huì)被 resolved。
一、認(rèn)識(shí)beforeEach()中的參數(shù)
全局守衛(wèi)(就是對(duì)整個(gè)路由實(shí)例進(jìn)行守衛(wèi),對(duì)其中的子路由也會(huì)進(jìn)行守衛(wèi))
路由獨(dú)享的守衛(wèi)(對(duì)實(shí)例中某個(gè)路由進(jìn)行守衛(wèi))
小結(jié):
全局和局部
import Vue from 'vue'; import VueRouter from 'vue-router'; // Vue中插件必須use注冊(cè) Vue.use(VueRouter); // 路由配置項(xiàng),此處是路由級(jí)鉤子的定義 const routes = [{ path: '/', component: resolve => require(['./index.vue'], resolve), keepAlive: true, }, { path: '/user/:userName', keepAlive: true, beforeEnter(to,from,next){ console.log('router beforeEnter'); next(); }, component: resolve => require(['./user.vue'], resolve), }]; // 實(shí)例化路由對(duì)象 const router = new VueRouter({ routes }); // 全局鉤子 router.beforeEach((to,from,next)=>{ console.log('global beforeEach') next(); }); router.beforeResolve((to,from,next)=>{ console.log('global beforeResolve') next(); }); router.afterEach((to,from,next)=>{ console.log('global afterEach') }); // 實(shí)例化Vue對(duì)象并掛載 new Vue({ router }).$mount('#app');
use.vue組件中使用導(dǎo)航守衛(wèi)
<template> <div> <h2>{{ msg }}</h2> <p>我是:{{userName}}</p> </div> </template> <script> export default { name: 'user', data () { return { msg: '這里是 User Page.', userName: '葉落' }; }, methods: {}, mounted () { var me = this; me.userName = me.$route.params.userName; console.log('user mounted.'); }, beforeRouteEnter (to, from, next) { console.log('component beforeRouteEnter'); next(); }, beforeRouteUpdate (to, from, next) { console.log('component beforeRouteUpdate'); next(); }, beforeRouteLeave(to,from,next){ console.log('component beforeRouteLeave'); next(); } }; </script>
執(zhí)行時(shí)機(jī)
由首頁(yè)進(jìn)入user頁(yè)面:
global beforeEach > router beforeEnter > component beforeRouteEnter > global beforeResolve > global afterEach > mounted
由user回到首頁(yè):
component beforeRouteLeave => global beforeEach => global beforeResolve => global afterEach
排除beforeRouteUpdate,其余六個(gè)導(dǎo)航鉤子的執(zhí)行時(shí)機(jī)其實(shí)很好理解。大體按照l(shuí)eave、before、enter、resolve、after的順序并全局優(yōu)先的思路執(zhí)行。beforeRouteUpdate的觸發(fā)是在動(dòng)態(tài)路由情形下,比如 path: '/user/:userName' 這條路由,當(dāng)頁(yè)面不變更只動(dòng)態(tài)的改變參數(shù)userName時(shí),beforeRouteUpdate便會(huì)觸發(fā)。
結(jié)論:使用vue組件拼湊成整個(gè)應(yīng)用,每個(gè)頁(yè)面是獨(dú)立的,路由依靠鏈接跳轉(zhuǎn),會(huì)刷新頁(yè)面。使用vue-router則可以不刷新頁(yè)面加載對(duì)應(yīng)組件,hash和history模式模擬路徑變化,不刷新頁(yè)面。
關(guān)于“vue-router導(dǎo)航守衛(wèi)的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。