Vue使用NProgress實(shí)現(xiàn)頁(yè)面頂部的進(jìn)度條顯示效果
一、安裝
npm i nprogress -S
二、常用配置項(xiàng)
1、遞增進(jìn)度條
以隨機(jī)量遞增，將其用于加載
NProgress.inc()
如果要增加特定值，可以將其作為參數(shù)傳遞
NProgress.inc(0.2)
2、動(dòng)畫設(shè)置
使用緩動(dòng)（CSS緩動(dòng)字符串）和速度（以毫秒為單位）調(diào)整動(dòng)畫設(shè)置。（默認(rèn)：ease和200）
NProgress.configure({ easing: ‘ease’, speed: 400 })
通過(guò)將加載微調(diào)器設(shè)置為false來(lái)關(guān)閉它。（默認(rèn)值：true）
NProgress.configure({ showSpinner: false })
三、使用
在main.js中引入樣式
import 'nprogress/nprogress.css'
它默認(rèn)顯示為藍(lán)色進(jìn)度條，如果想自定義進(jìn)度條顏色，可在全局css中或在app.vue下寫入自己自定義的css樣式；
<style>
// 自定義進(jìn)度條顏色
#nprogress .bar {
background: #e2e2e2 !important;
}
</style>
在路由文件router文件夾的index.js文件中
//引入nprogress 進(jìn)度條插件
import Vue from 'vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress'
Vue.use(VueRouter)
// 配置進(jìn)度條
NProgress.inc()
NProgress.configure({ showSpinner: false })
const routes = [{...}]
const router = new VueRouter({
routes
})
// 頁(yè)面路由剛開始切換的時(shí)候
router.beforeEach(async (to,from,next) => {
// 開啟進(jìn)度條
NProgress.start();
})
// 頁(yè)面路由切換完畢的時(shí)候
router.afterEach(() => {
// 關(guān)閉進(jìn)度條
NProgress.done()
})
export default router
在項(xiàng)目中常見(jiàn)的會(huì)把路由守衛(wèi)（權(quán)限等控制）與頂部進(jìn)度條的使用抽取出來(lái)放到一個(gè)文件中
如： nprogress.js文件，放在src的根目錄下
import router from './router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
NProgress.start()
if (to.path !== '/login') {
if (sessionStorage.getItem("token")) { // 判斷當(dāng)前的token是否存在 ； 登錄存入的token
next();
} else {
next({path: '/login'})
}
} else {
next();
}
});
router.afterEach(() => {
NProgress.done()
})
然后在main.js中引入
import '@/nprogress'
到此這篇關(guān)于Vue使用NProgress實(shí)現(xiàn)頁(yè)面頂部的進(jìn)度條顯示效果的文章就介紹到這了,更多相關(guān)Vue NProgress內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項(xiàng)目判斷開發(fā)、測(cè)試、正式環(huán)境過(guò)程
這篇文章主要介紹了Vue項(xiàng)目判斷開發(fā)、測(cè)試、正式環(huán)境過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解Nuxt內(nèi)導(dǎo)航欄的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了詳解Nuxt內(nèi)導(dǎo)航欄的兩種實(shí)現(xiàn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
uniapp實(shí)現(xiàn)webview頁(yè)面關(guān)閉功能的代碼示例
uniapp用web-view打開一個(gè)網(wǎng)頁(yè),網(wǎng)頁(yè)中點(diǎn)擊跳轉(zhuǎn)到下一層級(jí)的網(wǎng)頁(yè),一層層深入,點(diǎn)擊返回鍵或者頁(yè)面上方返回按鈕只能一層層往回退,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)webview頁(yè)面關(guān)閉功能的相關(guān)資料,需要的朋友可以參考下2024-03-03
Vue實(shí)現(xiàn)pdf在線預(yù)覽功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)pdf在線預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
這篇文章主要介紹了vue中使用Tinymce的示例,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
為了方便大家寫代碼，Vue給大家提供了很多方便的修飾符，比如我們經(jīng)常用到的取消冒泡，阻止默認(rèn)事件等等，這篇文章將給大家分享Vue?中的常用的修飾符2022-10-10
Vue2?Observer實(shí)例dep和閉包中dep區(qū)別詳解
這篇文章主要為大家介紹了Vue2?Observer實(shí)例dep和閉包中dep區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
使用Vue3+PDF.js實(shí)現(xiàn)PDF預(yù)覽功能
項(xiàng)目中有一個(gè)需要預(yù)覽下載pdf的需求,網(wǎng)上找了很久,決定使用 pdf.js 完成,下面這篇文章主要給大家介紹了關(guān)于使用Vue3+PDF.js實(shí)現(xiàn)PDF預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了簡(jiǎn)單了解vue.js數(shù)組的常用操作,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
遞歸組件是Vue中用于渲染復(fù)雜嵌套結(jié)構(gòu)的強(qiáng)大工具,通過(guò)組件引用自身來(lái)簡(jiǎn)化代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12