vue使用nprogress實現(xiàn)進度條

更新時間：2019年12月09日 08:37:39 作者：adley_app

這篇文章主要為大家詳細介紹了vue使用nprogress實現(xiàn)進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue使用nprogress進度條展示的具體代碼，供大家參考，具體內(nèi)容如下

安裝

npm i nprogress -S

使用

在main.js中

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

//使用鉤子函數(shù)對路由進行權(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)限則可進入，這里只是簡單的模擬管理員權(quán)限而已
    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();
});

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue監(jiān)聽屏幕尺寸變化問題,window.onresize很簡單
這篇文章主要介紹了vue監(jiān)聽屏幕尺寸變化問題,window.onresize很簡單,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue-resource攔截器判斷token失效跳轉(zhuǎn)的實例
下面小編就為大家?guī)硪黄猇ue-resource攔截器判斷token失效跳轉(zhuǎn)的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
vue + elementUI實現(xiàn)省市縣三級聯(lián)動的方法示例
這篇文章主要介紹了vue + elementUI實現(xiàn)省市縣三級聯(lián)動的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
Vue中"This dependency was not found"問題的解決方法
這篇文章主要介紹了Vue中"This dependency was not found"的問題的解決方法,需要的朋友可以參考下
2018-06-06
vue多頁面配置詳情
這篇文章主要介紹了vue多頁面配置，單頁應(yīng)用這個概念，是隨著前幾年 AngularJS、React、Ember 等這些框架的出現(xiàn)而出現(xiàn)的。在前面的前言內(nèi)容里，我們在頁面渲染中講了頁面的局部刷新,而單頁應(yīng)用則是使用了頁面的局部刷新的能力,下面來看看詳細內(nèi)容,需要的朋友可以參考一下
2021-11-11
vue3.0中友好使用antdv示例詳解
這篇文章主要給大家介紹了關(guān)于在vue3.0中如何友好使用antdv的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue中多路由表頭吸頂實現(xiàn)的幾種布局方式
這篇文章主要介紹了vue項目多路由表頭吸頂實現(xiàn)的幾種布局方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-04-04
Vue實現(xiàn)簡單選項卡效果
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單選項卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue配置代理(devServer)解決跨域問題
這篇文章主要介紹了Vue配置代理(devServer)解決跨域問題,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-08-08
Vue-Router的使用方法
這篇文章主要介紹了Vue-Router的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09