這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在vue中利用nprogress實(shí)現(xiàn)一個(gè)頁面頂部進(jìn)度條，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供巴彥企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、網(wǎng)站制作、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為巴彥眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

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)畫效果
NProgress.configure({ ease: 'ease', speed: 500 })
 
// 全局路由攔截-進(jìn)入頁面前執(zhí)行
router.beforeEach((to, from, next) => {
 if (to.path === `${base}login`) {
 return next()
 }
 
 // token驗(yàn)證，如果存儲(chǔ)在sessionStorage里的auth的值丟失，就回到登陸頁面，(開發(fā)時(shí)可以注釋掉)
 // if (!sessionStorage.getItem('auth')) {
 // return next(`${base}login`)
 // }
 
 // 如果頁面在 / 默認(rèn)頁面，跳轉(zhuǎn)到登陸頁面(和vue路由重定向功能類似)
 if (to.path === `${base}`) {
 return next(`${base}login`)
 }
 // NProgress開始進(jìn)度條
 NProgress.start()
 next()
})
 
// 全局后置鉤子-常用于結(jié)束動(dòng)畫等
router.afterEach(transition => {
 // NProgress結(jié)束進(jìn)度條
 NProgress.done()
 // console.log(transition)
})
 
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: ''
})

上述就是小編為大家分享的怎么在vue中利用nprogress實(shí)現(xiàn)一個(gè)頁面頂部進(jìn)度條了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。