vue配置nprogress實(shí)現(xiàn)頁(yè)面頂部進(jìn)度條
本文實(shí)例為大家分享了vue配置nprogress實(shí)現(xiàn)頁(yè)面頂部進(jìn)度條的具體代碼,供大家參考,具體內(nèi)容如下
1. 安裝
npm install nprogress --save
2. 在main.js中導(dǎo)入

源碼~~~~~~方便你復(fù)制
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import moment from './plugins/moment'
import axios from './plugins/axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { base } from './router/config'
Vue.use(iView)
Vue.use(moment)
Vue.use(axios)
Vue.config.productionTip = false
// 配置NProgress進(jìn)度條選項(xiàng) —— 動(dòng)畫(huà)效果
NProgress.configure({ ease: 'ease', speed: 500 })
// 全局路由攔截-進(jìn)入頁(yè)面前執(zhí)行
router.beforeEach((to, from, next) => {
if (to.path === `${base}login`) {
return next()
}
// token驗(yàn)證,如果存儲(chǔ)在sessionStorage里的auth的值丟失,就回到登陸頁(yè)面,(開(kāi)發(fā)時(shí)可以注釋掉)
// if (!sessionStorage.getItem('auth')) {
// return next(`${base}login`)
// }
// 如果頁(yè)面在 / 默認(rèn)頁(yè)面,跳轉(zhuǎn)到登陸頁(yè)面(和vue路由重定向功能類(lèi)似)
if (to.path === `${base}`) {
return next(`${base}login`)
}
// NProgress開(kāi)始進(jìn)度條
NProgress.start()
next()
})
// 全局后置鉤子-常用于結(jié)束動(dòng)畫(huà)等
router.afterEach(transition => {
// NProgress結(jié)束進(jìn)度條
NProgress.done()
// console.log(transition)
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解如何在Vue3+TS的項(xiàng)目中使用NProgress進(jìn)度條
- vue Nprogress進(jìn)度條功能實(shí)現(xiàn)常見(jiàn)問(wèn)題
- Vue中nprogress頁(yè)面加載進(jìn)度條的方法實(shí)現(xiàn)
- vue使用nprogress加載路由進(jìn)度條的方法
- vue使用nprogress實(shí)現(xiàn)進(jìn)度條
- Vue使用NProgress進(jìn)度條的方法
- 在vue項(xiàng)目中使用Nprogress.js進(jìn)度條的方法
- Vue使用NProgress實(shí)現(xiàn)頁(yè)面頂部的進(jìn)度條顯示效果
相關(guān)文章
vue實(shí)現(xiàn)跨頁(yè)面定位錨點(diǎn)區(qū)域方式
這篇文章主要介紹了vue實(shí)現(xiàn)跨頁(yè)面定位錨點(diǎn)區(qū)域方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
echarts設(shè)置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
這篇文章主要為大家介紹了echarts設(shè)置tootip輪播切換展示效果,vue3搭配vue-echarts粘貼即用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-10-10
vue.js實(shí)現(xiàn)回到頂部動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)回到頂部動(dòng)畫(huà)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟
項(xiàng)目完成,我們會(huì)將項(xiàng)目進(jìn)行上線,為了提升性能,我們往往會(huì)進(jìn)行一些優(yōu)化處理,本文主要介紹了vue項(xiàng)目打包以及優(yōu)化的實(shí)現(xiàn)步驟,感興趣的可以了解一下2021-07-07
Vue列表循環(huán)從指定下標(biāo)開(kāi)始的多種解決方案
這篇文章主要介紹了Vue列表循環(huán)從指定下標(biāo)開(kāi)始的多種方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
關(guān)于vue2強(qiáng)制刷新,解決頁(yè)面不會(huì)重新渲染的問(wèn)題
今天小編就為大家分享一篇關(guān)于vue2強(qiáng)制刷新,解決頁(yè)面不會(huì)重新渲染的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10

