vue-router的鉤子函數(shù)用法實(shí)例分析
更新時(shí)間：2019年10月26日 12:44:53 作者：曉筆刀
這篇文章主要介紹了vue-router的鉤子函數(shù)用法,結(jié)合實(shí)例形式分析了vue路由鉤子分類及vue-router鉤子函數(shù)相關(guān)使用技巧,需要的朋友可以參考下
本文實(shí)例講述了vue-router的鉤子函數(shù)用法。分享給大家供大家參考，具體如下：
vue路由鉤子大致可以分為三類:
1.全局鉤子
主要包括beforeEach和aftrEach,
beforeEach函數(shù)有三個(gè)參數(shù)：
- to:router即將進(jìn)入的路由對(duì)象
- from:當(dāng)前導(dǎo)航即將離開的路由
- next:Function,進(jìn)行管道中的一個(gè)鉤子，如果執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）；否則為false，終止導(dǎo)航。
afterEach函數(shù)不用傳next()函數(shù)
這類鉤子主要作用于全局,一般用來(lái)判斷權(quán)限,以及以及頁(yè)面丟失時(shí)候需要執(zhí)行的操作,例如:
//使用鉤子函數(shù)對(duì)路由進(jìn)行權(quán)限跳轉(zhuǎn)
router.beforeEach((to, from, next) => {
const role = localStorage.getItem('ms_username');
if(!role && to.path !== '/login'){
next('/login');
}else if(to.meta.permission){
// 如果是管理員權(quán)限則可進(jìn)入，這里只是簡(jiǎn)單的模擬管理員權(quán)限而已
role === 'admin' ? next() : next('/403');
}else{
// 簡(jiǎn)單的判斷IE10及以下不進(jìn)入富文本編輯器，該組件不兼容
if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
Vue.prototype.$alert('vue-quill-editor組件不兼容IE10及以下瀏覽器，請(qǐng)使用更高版本的瀏
覽器查看', '瀏覽器不兼容通知', {
confirmButtonText: '確定'
});
}else{
next();
}
}
})
2.單個(gè)路由里面的鉤子
主要用于寫某個(gè)指定路由跳轉(zhuǎn)時(shí)需要執(zhí)行的邏輯
{
path: '/dashboard',
component: resolve => require(['../components/page/Dashboard.vue'], resolve),
meta: { title: '系統(tǒng)首頁(yè)' },
beforeEnter: (to, from, next) => {
},
beforeLeave: (to, from, next) => {
}
},
3.組件路由
主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,這幾個(gè)鉤子都是寫在組件里面也可以傳三個(gè)參數(shù)(to,from,next),作用與前面類似.
beforeRouteEnter(to, from, next) {
next(vm => {
if (
vm.$route.meta.hasOwnProperty('auth_key') &&
vm.$route.meta.auth_key != ''
) {
if (!vm.hasPermission(vm.$route.meta.auth_key)) {
vm.$router.replace('/admin/noPermission')
}
}
})
},
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue+vuex+axios實(shí)現(xiàn)登錄、注冊(cè)頁(yè)權(quán)限攔截
下面小編就為大家分享一篇vue+vuex+axios實(shí)現(xiàn)登錄、注冊(cè)頁(yè)權(quán)限攔截，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家介紹了Hooks對(duì)于Vue作用意義詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue中promise的使用及異步請(qǐng)求數(shù)據(jù)的方法
這篇文章主要介紹了vue中promise的使用及異步請(qǐng)求數(shù)據(jù)的方法,文章給大家較詳細(xì)的介紹了遇到的問(wèn)題及解決方法，需要的朋友可以參考下2018-11-11
vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個(gè)函數(shù)在某段時(shí)間內(nèi),無(wú)論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復(fù)執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下2024-01-01
vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)scrollIntoView()使用案例
這篇文章主要介紹了vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)scrollIntoView()使用案例，文中結(jié)合實(shí)例代碼介紹了vue錨點(diǎn)跳轉(zhuǎn)的三種方式(頁(yè)內(nèi)跳轉(zhuǎn)，跨頁(yè)跳轉(zhuǎn)，函數(shù)跳轉(zhuǎn)),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了詳解vue-router和vue-cli以及組件之間的傳值,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
利用Electron簡(jiǎn)單擼一個(gè)Markdown編輯器的方法
這篇文章主要介紹了利用Electron簡(jiǎn)單擼一個(gè)Markdown編輯器的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
vue路由history模式頁(yè)面刷新404解決方法Koa?Express
這篇文章主要為大家介紹了vue路由history模式頁(yè)面刷新404解決方法（Koa?Express）詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
在我們?nèi)粘ｉ_發(fā)中經(jīng)常因?yàn)樗季S定式，我們會(huì)犯一些奇怪的錯(cuò)誤，有時(shí)候看似簡(jiǎn)單的問(wèn)題卻給出了復(fù)雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對(duì)象的方法，這個(gè)看似簡(jiǎn)單卻繞了一些彎路的問(wèn)題，有必要和大家分享下，需要的朋友可以參考學(xué)習(xí)，下面來(lái)看看吧。2017-04-04
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。今天我們來(lái)介紹VueJs 搭建Axios接口請(qǐng)求工具，需要的朋友參考下本文吧2017-11-11