快捷導(dǎo)航

vue使用nprogress加載路由進(jìn)度條的方法

更新時(shí)間：2020年06月04日 17:19:01 作者：向日葵_簡(jiǎn)默

這篇文章主要介紹了vue使用nprogress加載路由進(jìn)度條的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1、效果圖

2、安裝

npm install --save nprogress

基本用法

NProgress.start();
NProgress.done();

3、在路由中使用

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

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

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

PS：下面看下Vue使用NProgress的方法

NProgress是頁(yè)面跳轉(zhuǎn)是出現(xiàn)在瀏覽器頂部的進(jìn)度條

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

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

如下圖所示，綠色的進(jìn)度條就是NProgress實(shí)現(xiàn)的效果

這里寫(xiě)圖片描述

1、安裝

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

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

2、使用

//導(dǎo)入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

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

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

總結(jié)

到此這篇關(guān)于vue使用nprogress加載路由進(jìn)度條的文章就介紹到這了,更多相關(guān)vue nprogress路由進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3源碼解讀computed和watch
這篇文章主要為大家介紹了Vue3中的computed和watch源碼解讀分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
vue使用Echarts繪制地圖完整步驟
這篇文章主要給大家介紹了關(guān)于vue使用Echarts繪制地圖的相關(guān)資料,Apache ECharts一個(gè)基于JavaScript的開(kāi)源可視化圖表庫(kù),提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖,用于統(tǒng)計(jì)的盒形圖,需要的朋友可以參考下
2023-09-09
Vue表單輸入綁定的示例代碼
這篇文章主要介紹了Vue表單輸入綁定的示例代碼，本文使用v-model指令在表單input創(chuàng)建雙向數(shù)據(jù)綁定，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-11-11
利用vue3自己實(shí)現(xiàn)計(jì)數(shù)功能組件封裝實(shí)例
組件(Component) 是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于利用vue3自己實(shí)現(xiàn)計(jì)數(shù)功能組件封裝的相關(guān)資料,需要的朋友可以參考下
2021-09-09
vue圖片上傳本地預(yù)覽組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue圖片上傳本地預(yù)覽組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-02-02
uniApp?h5項(xiàng)目如何通過(guò)命令行打包并生成指定路徑及文件名稱(chēng)
用uni-app來(lái)寫(xiě)安卓端,近日需要將程序打包為H5放到web服務(wù)器上,經(jīng)過(guò)一番折騰,這里給大家分享下,這篇文章主要給大家介紹了關(guān)于uniApp?h5項(xiàng)目如何通過(guò)命令行打包并生成指定路徑及文件名稱(chēng)的相關(guān)資料,需要的朋友可以參考下
2024-02-02
vue ssr 指南詳讀
這篇文章主要介紹了vue ssr 指南詳讀,詳細(xì)的介紹了什么是SSR以及如何使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
Vue 中對(duì)圖片地址進(jìn)行拼接的方法
今天小編就為大家分享一篇Vue 中對(duì)圖片地址進(jìn)行拼接的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
如何使用JS監(jiān)聽(tīng)一個(gè)變量改變
在JS編程中如果能監(jiān)測(cè)變量的內(nèi)容,當(dāng)變量值發(fā)生變化時(shí),實(shí)時(shí)發(fā)出通知,這定是一項(xiàng)很有用的功能,下面這篇文章主要給大家介紹了關(guān)于如何使用JS監(jiān)聽(tīng)一個(gè)變量改變的相關(guān)資料,需要的朋友可以參考下
2023-05-05
Vue動(dòng)態(tài)生成el-checkbox點(diǎn)擊無(wú)法賦值的解決方法
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)生成el-checkbox點(diǎn)擊無(wú)法賦值的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02