Vue使用NProgress的操作過程解析

更新時間：2019年10月10日 11:11:29 作者：bingxiaoxiao

這篇文章主要介紹了Vue使用NProgress的操作過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

NProgress是頁面跳轉是出現(xiàn)在瀏覽器頂部的進度條

官網(wǎng)：http://ricostacruz.com/nprogress/

github：https://github.com/rstacruz/nprogress

綠色的進度條就是NProgress實現(xiàn)的效果

安裝

$ npm install --save nprogress 或者
$ yarn add nprogress

//用法
NProgress.start();
NProgress.done();

使用

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

router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})

router.afterEach(() => {
 NProgress.done()
})

在App.vue中的style中增加：

  #nprogress .bar {
   background: red !important; //自定義顏色
  }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

VUE3自定義指令防止重復點擊多次提交的實現(xiàn)方法
vue3項目,新增彈框連續(xù)點擊確定按鈕防止多次提交,在按鈕上添加自定義指令,這篇文章主要介紹了VUE3自定義指令防止重復點擊多次提交的實現(xiàn)方法,需要的朋友可以參考下
2024-08-08
使用vite搭建ssr活動頁架構的實現(xiàn)
本文主要介紹了使用vite搭建ssr活動頁架構，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-07-07
vue2安裝vue-router報錯的解決方法
vue-router的安裝不是理想化的,會出現(xiàn)問題,需要靜下心認真研究,熬過去就會懂得更多,這篇文章主要給大家介紹了關于vue2安裝vue-router報錯的解決方法,需要的朋友可以參考下
2022-03-03
Vue.js directive自定義指令詳解
這篇文章主要介紹了Vue.js directive自定義指令詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下
2021-09-09
vue中如何讓子組件修改父組件數(shù)據(jù)
這篇文章主要介紹了vue中子組件修改父組件數(shù)據(jù)的相關資料，文中介紹了vue中watch的認識，關于子組件修改父組件屬性認識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-06-06
在vue項目中配置你自己的啟動命令和打包命令方式
這篇文章主要介紹了在vue項目中配置你自己的啟動命令和打包命令方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue3中使用Vchart的示例代碼
使用vue開發(fā)的web項目中使用圖表,可以使用v-charts,本文主要介紹了vue3中使用Vchart的示例代碼,具有一定的參考價值,感興趣的可以了解一下
2024-01-01
vue3+ts項目搭建的實現(xiàn)示例
這篇文章主要介紹了vue3+ts項目搭建的實現(xiàn)示例,本文目的在于記錄自己項目框架搭建的過程,通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧
2024-03-03
Vue v-model組件封裝(類似彈窗組件)
這篇文章主要介紹了Vue中的 v-model組件封裝(類似彈窗組件),本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-01-01
VUE中filters過濾器的兩種用法實例
vue中過濾器的作用可被用于一些常見的文本格式化,也就是修飾文本,但是文本內容不會改變,下面這篇文章主要給大家介紹了關于VUE中filters過濾器的兩種用法,需要的朋友可以參考下
2022-04-04