Vue使用NProgress的操作過程解析
更新時間：2019年10月10日 11:11:29 作者：bingxiaoxiao
這篇文章主要介紹了Vue使用NProgress的操作過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
這篇文章主要介紹了Vue使用NProgress的操作過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
NProgress是頁面跳轉是出現(xiàn)在瀏覽器頂部的進度條
官網：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; //自定義顏色
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了vue 微信掃碼登錄(自定義樣式)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
vue3 reactive 請求接口數據賦值后拿不到的問題及解決方案
這篇文章主要介紹了vue3 reactive 請求接口數據賦值后拿不到的問題及解決方案,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-04-04
基于vue中解決v-for使用報紅并出現(xiàn)警告的問題
下面小編就為大家分享一篇基于vue中解決v-for使用報紅并出現(xiàn)警告的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue.js 初體驗之Chrome 插件開發(fā)實錄 ,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue實現(xiàn)右鍵點擊彈框信息功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)簡易的車牌輸入鍵盤效果,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以了解下2023-11-11
熱力圖是一種數據可視化技術,它使用顏色來表示數據點的值,熱力圖常用于可視化分布數據,例如人口密度、溫度變化或網站流量,本文給大家介紹了如何使用Vue3和ApexCharts創(chuàng)建交互式熱力圖,需要的朋友可以參考下2024-06-06
這篇文章主要為大家介紹了Vue nextTick延遲回調獲取更新后DOM機制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了vue 數組和對象不能直接賦值情況和解決方法,需要的朋友可以參考下2017-10-10