在vue項(xiàng)目中使用Nprogress.js進(jìn)度條的方法
更新時(shí)間：2018年01月31日 09:30:07 作者：小小令
NProgress.js是輕量級(jí)的進(jìn)度條組件，使用簡(jiǎn)便，可以很方便集成到單頁面應(yīng)用中。這篇文章主要介紹了在vue項(xiàng)目中使用Nprogress.js進(jìn)度條的方法,需要的朋友可以參考下
NProgress.js提供頁面加載進(jìn)度條效果，當(dāng)頁面打開加載時(shí)，在頁面頂部會(huì)出現(xiàn)進(jìn)度條加載動(dòng)畫。NProgress.js是輕量級(jí)的進(jìn)度條組件，使用簡(jiǎn)便，可以很方便集成到單頁面應(yīng)用中。
Ajaxyy應(yīng)用程序的細(xì)長(zhǎng)進(jìn)度條。靈感來自Google，YouTube和Medium。
在vue中使用nprogress.js
安裝
$ bower install --save nprogress $ npm install --save nprogress
在項(xiàng)目中引入
在main.js中引入要使用的nprogress
import NProgress from 'nprogress' import 'nprogress/nprogress.css'
基本用法
NProgress.start(); NProgress.done();
在路由頁面跳轉(zhuǎn)使用
同樣在main.js中
router.beforeEach((to, from, next) => {
if (to.path == '/login') {
sessionStorage.removeItem('username');
}
let user = sessionStorage.getItem('username');
if (!user && to.path != '/login') {
next({path: '/login'})
} else {
NProgress.start();
next()
}
});
router.afterEach(transition => {
NProgress.done();
});
總結(jié)
以上所述是小編給大家介紹的在vue項(xiàng)目中使用Nprogress.js進(jìn)度條的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了Vue手寫實(shí)現(xiàn)組件初渲染，在Vue進(jìn)行文本編譯之后，會(huì)得到代碼字符串生成的render函數(shù)，本文會(huì)基于render函數(shù)展開主題相關(guān)內(nèi)容，感興趣的朋友可以參考一下2022-08-08
這篇文章主要介紹了Vue3中實(shí)現(xiàn)div拖拽功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
這篇文章主要為大家介紹了分析總結(jié)20道Vue高頻面試題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue中element-ui使用axios上傳文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
基于Vue3實(shí)現(xiàn)百度地圖位置選擇器組件
在開發(fā)前端應(yīng)用時(shí),地圖選擇器是一個(gè)非常常見的需求,本文將一步步展示如何使用?Vue?3?和?Element?Plus?來實(shí)現(xiàn)一個(gè)百度地圖位置選擇器組件,有需要的可以參考一下2025-04-04
解決vue-router進(jìn)行build無法正常顯示路由頁面的問題
下面小編就為大家分享一篇解決vue-router進(jìn)行build無法正常顯示路由頁面的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了在antd Table中插入可編輯的單元格實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue-quill-editor富文本編輯器上傳視頻功能詳解
需求需要實(shí)現(xiàn)富文本的功能,同時(shí)富文本中還可以上傳視頻和圖片,選來選去最后決定了用這個(gè)富文本編輯器,下面這篇文章主要給大家介紹了關(guān)于vue-quill-editor富文本編輯器上傳視頻功能的相關(guān)資料,需要的朋友可以參考下2023-05-05
如何解決element-ui中多個(gè)table在tab切換時(shí)出現(xiàn)寬度縮小問題
這篇文章主要介紹了如何解決element-ui中多個(gè)table在tab切換時(shí)出現(xiàn)寬度縮小問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
集成vue-cli腳手架里面的二維碼插件貌似很多，一般都會(huì)滿足大部分需求，這次就講一下插件vue-qriously生成二維碼效果，感興趣的朋友一起看看吧2022-04-04