vue使用nprogress實現(xiàn)進度條
更新時間：2019年12月09日 08:37:39 作者：adley_app
這篇文章主要為大家詳細介紹了vue使用nprogress實現(xiàn)進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue使用nprogress進度條展示的具體代碼，供大家參考，具體內容如下
安裝
npm i nprogress -S
使用
在main.js中
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//使用鉤子函數(shù)對路由進行權限跳轉
router.beforeEach((to, from, next) => {
const role = localStorage.getItem('ms_username');
if(!role && to.path !== '/login'){
next('/login');
}else if(to.meta.permission){
NProgress.start();
// 如果是管理員權限則可進入，這里只是簡單的模擬管理員權限而已
role === 'admin' ? next() : next('/403');
}else{
// 簡單的判斷IE10及以下不進入富文本編輯器，該組件不兼容
if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
Vue.prototype.$alert('vue-quill-editor組件不兼容IE10及以下瀏覽器，請使用更高版本的瀏覽器查看', '瀏覽器不兼容通知', {
confirmButtonText: '確定'
});
}else{
NProgress.start();
next();
}
}
})
router.afterEach(transition => {
NProgress.done();
});
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue監(jiān)聽屏幕尺寸變化問題,window.onresize很簡單
這篇文章主要介紹了vue監(jiān)聽屏幕尺寸變化問題,window.onresize很簡單,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
下面小編就為大家?guī)硪黄猇ue-resource攔截器判斷token失效跳轉的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue + elementUI實現(xiàn)省市縣三級聯(lián)動的方法示例
這篇文章主要介紹了vue + elementUI實現(xiàn)省市縣三級聯(lián)動的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vue中"This dependency was not found"問題的解決方法
這篇文章主要介紹了Vue中"This dependency was not found"的問題的解決方法,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue多頁面配置，單頁應用這個概念，是隨著前幾年 AngularJS、React、Ember 等這些框架的出現(xiàn)而出現(xiàn)的。在前面的前言內容里，我們在頁面渲染中講了頁面的局部刷新,而單頁應用則是使用了頁面的局部刷新的能力,下面來看看詳細內容,需要的朋友可以參考一下2021-11-11
這篇文章主要給大家介紹了關于在vue3.0中如何友好使用antdv的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了vue項目多路由表頭吸頂實現(xiàn)的幾種布局方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單選項卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue配置代理(devServer)解決跨域問題,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-08-08
這篇文章主要介紹了Vue-Router的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09