vue使用nprogress加載路由進度條的方法
更新時間：2020年06月04日 17:19:01 作者：向日葵_簡默
這篇文章主要介紹了vue使用nprogress加載路由進度條的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
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是頁面跳轉(zhuǎn)是出現(xiàn)在瀏覽器頂部的進度條
官網(wǎng)：http://ricostacruz.com/nprogress/
github：https://github.com/rstacruz/nprogress
如下圖所示，綠色的進度條就是NProgress實現(xiàn)的效果
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加載路由進度條的文章就介紹到這了,更多相關(guān)vue nprogress路由進度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue3中的computed和watch源碼解讀分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要給大家介紹了關(guān)于vue使用Echarts繪制地圖的相關(guān)資料,Apache ECharts一個基于JavaScript的開源可視化圖表庫,提供了常規(guī)的折線圖、柱狀圖、散點圖、餅圖、K線圖,用于統(tǒng)計的盒形圖,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue表單輸入綁定的示例代碼，本文使用v-model指令在表單input創(chuàng)建雙向數(shù)據(jù)綁定，非常具有實用價值，需要的朋友可以參考下2018-11-11
利用vue3自己實現(xiàn)計數(shù)功能組件封裝實例
組件(Component) 是Vue.js最強大的功能之一,組件可以擴展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于利用vue3自己實現(xiàn)計數(shù)功能組件封裝的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了vue圖片上傳本地預(yù)覽組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
uniApp?h5項目如何通過命令行打包并生成指定路徑及文件名稱
用uni-app來寫安卓端,近日需要將程序打包為H5放到web服務(wù)器上,經(jīng)過一番折騰,這里給大家分享下,這篇文章主要給大家介紹了關(guān)于uniApp?h5項目如何通過命令行打包并生成指定路徑及文件名稱的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue ssr 指南詳讀,詳細的介紹了什么是SSR以及如何使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
今天小編就為大家分享一篇Vue 中對圖片地址進行拼接的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在JS編程中如果能監(jiān)測變量的內(nèi)容,當(dāng)變量值發(fā)生變化時,實時發(fā)出通知,這定是一項很有用的功能,下面這篇文章主要給大家介紹了關(guān)于如何使用JS監(jiān)聽一個變量改變的相關(guān)資料,需要的朋友可以參考下2023-05-05
Vue動態(tài)生成el-checkbox點擊無法賦值的解決方法
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)生成el-checkbox點擊無法賦值的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02