Vue使用NProgress的操作過(guò)程解析
這篇文章主要介紹了Vue使用NProgress的操作過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
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)的效果
安裝
$ npm install --save nprogress 或者 $ yarn add nprogress //用法 NProgress.start(); NProgress.done();
使用
//導(dǎo)入 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; //自定義顏色 }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3 reactive 請(qǐng)求接口數(shù)據(jù)賦值后拿不到的問(wèn)題及解決方案
這篇文章主要介紹了vue3 reactive 請(qǐng)求接口數(shù)據(jù)賦值后拿不到的問(wèn)題及解決方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04基于vue中解決v-for使用報(bào)紅并出現(xiàn)警告的問(wèn)題
下面小編就為大家分享一篇基于vue中解決v-for使用報(bào)紅并出現(xiàn)警告的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue.js 初體驗(yàn)之Chrome 插件開(kāi)發(fā)實(shí)錄
這篇文章主要介紹了vue.js 初體驗(yàn)之Chrome 插件開(kāi)發(fā)實(shí)錄 ,需要的朋友可以參考下2017-05-05vue實(shí)現(xiàn)右鍵點(diǎn)擊彈框信息功能
這篇文章主要介紹了vue實(shí)現(xiàn)右鍵點(diǎn)擊彈框信息功能方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12使用Vue實(shí)現(xiàn)簡(jiǎn)易的車牌輸入鍵盤(pán)
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)簡(jiǎn)易的車牌輸入鍵盤(pán)效果,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下2023-11-11Vue nextTick延遲回調(diào)獲取更新后DOM機(jī)制詳解
這篇文章主要為大家介紹了Vue nextTick延遲回調(diào)獲取更新后DOM機(jī)制詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08vue 數(shù)組和對(duì)象不能直接賦值情況和解決方法(推薦)
這篇文章主要介紹了vue 數(shù)組和對(duì)象不能直接賦值情況和解決方法,需要的朋友可以參考下2017-10-10