vue使用nprogress實現(xiàn)進(jìn)度條
更新時間：2019年12月09日 08:37:39 作者：adley_app
這篇文章主要為大家詳細(xì)介紹了vue使用nprogress實現(xiàn)進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue使用nprogress進(jìn)度條展示的具體代碼，供大家參考，具體內(nèi)容如下
安裝
npm i nprogress -S
使用
在main.js中
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//使用鉤子函數(shù)對路由進(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){
NProgress.start();
// 如果是管理員權(quán)限則可進(jìn)入，這里只是簡單的模擬管理員權(quán)限而已
role === 'admin' ? next() : next('/403');
}else{
// 簡單的判斷IE10及以下不進(jìn)入富文本編輯器，該組件不兼容
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();
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue利用sync語法糖實現(xiàn)modal彈框的項目實踐
本文主要介紹了vue利用sync語法糖實現(xiàn)modal彈框的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要給大家介紹了關(guān)于Vue代碼分割懶加載的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
這篇文章主要介紹了vue3實現(xiàn)動態(tài)添加路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
vue中使用vue-pdf組件實現(xiàn)文件預(yù)覽及相應(yīng)報錯解決
在需求中,經(jīng)常遇見pdf的在線預(yù)覽效果,很多pdf插件不支持vue3,或者是沒有集成翻頁放大縮小功能,比如vue-pdf,下面這篇文章主要給大家介紹了關(guān)于vue中使用vue-pdf組件實現(xiàn)文件預(yù)覽及相應(yīng)報錯解決的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue3?使用defineAsyncComponent與component標(biāo)簽實現(xiàn)動態(tài)渲染組件思路詳解
這篇文章主要介紹了vue3?使用defineAsyncComponent與component標(biāo)簽實現(xiàn)動態(tài)渲染組件,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vue axios sessionID每次請求都不同的原因以及修改方式
這篇文章主要介紹了vue axios sessionID每次請求都不同的原因以及修改方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vue項目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具
這篇文章主要為大家介紹了vue項目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具的踩坑分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了vue3?自定義指令控制按鈕權(quán)限,為了提高用戶體驗，當(dāng)該按鈕無權(quán)使用時，使用el-tooltip功能進(jìn)行提醒，結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
本文主要介紹了element表格組件實現(xiàn)右鍵菜單的功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05