快捷導(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)的效果

這里寫圖片描述

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)文章

Element Dropdown下拉菜單的使用方法
這篇文章主要介紹了Element Dropdown下拉菜單的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
vue 之 .sync 修飾符示例詳解
這篇文章主要介紹了vue 之 .sync 修飾符的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-04-04
利用Vue3 (一）創(chuàng)建Vue CLI 項(xiàng)目
這篇文章主要介紹利用Vue3 創(chuàng)建Vue CLI 項(xiàng)目，下面文章內(nèi)容附有官方文檔鏈接，安裝過(guò)程，需要的可以參考一下
2021-10-10
Vue3.2?setup語(yǔ)法糖及Hook函數(shù)基本使用
這篇文章主要為大家介紹了Vue3.2?setup語(yǔ)法糖及Hook函數(shù)基本使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue中添加過(guò)渡效果的方法
本篇文章主要介紹了Vue中添加過(guò)渡效果的方法，Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果，有興趣的同學(xué)可以了解一下。
2017-03-03
vue中v-bind與v-model的區(qū)別舉例詳解
這篇文章主要給大家介紹了關(guān)于vue中v-bind與v-model區(qū)別的相關(guān)資料,v-model和v-bind是Vue.js框架中的兩個(gè)常用指令,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09
Vue實(shí)現(xiàn)穿梭框效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
vue獲取el-form的整體驗(yàn)證狀態(tài)
本文主要介紹了vue獲取el-form的整體驗(yàn)證狀態(tài)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
elementUi 中table表尾插入行的實(shí)例
這篇文章主要介紹了elementUi 中table表尾插入行的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
解決antd日期選擇組件,添加value就無(wú)法點(diǎn)擊下一年和下一月問(wèn)題
這篇文章主要介紹了解決antd日期選擇組件,添加value就無(wú)法點(diǎn)擊下一年和下一月問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10