vue Nprogress進(jìn)度條功能實(shí)現(xiàn)常見(jiàn)問(wèn)題
NProgress是頁(yè)面跳轉(zhuǎn)是出現(xiàn)在瀏覽器頂部的進(jìn)度條官網(wǎng):http://ricostacruz.com/nprogress/github:https://github.com/rstacruz/nprogress
下圖中的這種頂部進(jìn)度條是非常常見(jiàn)的,在vue項(xiàng)目中有對(duì)應(yīng)的插件。Nprogress

Nprogress進(jìn)度條的使用方法如下:
1.安裝nprogress插件
npm install --save nprogress注意此處的--save等同于-s,就是將插件的名稱(chēng)及版本號(hào)保存到package.json文件中的dependencies中,這樣其他人克隆項(xiàng)目后,可以通過(guò)npm install就可以下載下來(lái)所有的插件到node_modules中了。
2.nprogress插件的使用
此處進(jìn)度條主要用于頁(yè)面路由的跳轉(zhuǎn)過(guò)程中,因此可以直接在router/index.js中使用:
在路由跳轉(zhuǎn)之前,開(kāi)啟進(jìn)度條加載,在路由跳轉(zhuǎn)之后,結(jié)束進(jìn)度條的加載。
router/index.js文件內(nèi)容如下:
import Vue from 'vue';import VueRouter from 'vue-router';import store from '@/store';import HomeLayout form '@/views/home/layout';import NProgress from 'nprogress';import userCenter from './modules/userCenter';import ’nprogress/nprogress.css’Vue.use(VueRouter);NProgress.inc(0.2);NProgress.configure({easing:’ease’,speed:2000,showSpinner:false,trickle:false})const routes = [{path:'/',name:'Index',redirect:'/index'},{path:'/index',name:’Index’,component:()=>import (’@/views/home/index.vue’),meta:{title:’首頁(yè)’}},{path:’/home’,name:’Home’,component:()=>import(’@/views/home/main’),meta:{title:’首頁(yè)’}},{path:’/login’,name:’Login’,component:()=>import (’@/views/login’),meta:{title:’登錄’}},{path:’/register’,name:’register’,component:()=>import(’@/views/register’),meta:{title:’注冊(cè)’}},{path:’/404’,name:’404’,component:()=>import(’@/views/errorPage’)},{path:’*’,redirect:’/404’}]const router = new VueRouter({mode:’history’,routes})//路由跳轉(zhuǎn)之前做攔截router.beforeEach((to,from,next)=>{//頁(yè)面跳轉(zhuǎn)之前,開(kāi)啟進(jìn)度條NProgress.start();//某些攔截操作,是否登錄權(quán)限等...const token = window.localStorage.getItem(’token’);//從localstorage中獲取緩存if(to.meta.title){document.title = to.meta.title;//將瀏覽器選項(xiàng)卡的標(biāo)題改為頁(yè)面的title}store.commit(’changeCurrentPage’,to.path);const reg = /[a-zA-Z]+/$/;//不需要校驗(yàn)的路由直接跳轉(zhuǎn)if(!to.meta.requireAuth){if(reg.test(to.path)){next(to.path.replace(reg,’’));return;}next();return}if(token&&to.name!==’Index’){//已登錄且要跳轉(zhuǎn)的頁(yè)面不是登錄頁(yè)面if(reg.test(to.path)){next(to.path.replace(reg,’’));return;}next();//可以直接跳轉(zhuǎn)}else if(token && to.name == ’Index’){//已登錄且要跳轉(zhuǎn)的頁(yè)面是登錄頁(yè)if(reg.test(to.path)){next(to.path.replace(reg,’’));return}next(’/home’);//直接跳轉(zhuǎn)到首頁(yè)}else if(!token && to.name !=’Index’){//未登錄且要跳轉(zhuǎn)的頁(yè)面不是登錄頁(yè)next(’/index’);//跳轉(zhuǎn)到登錄頁(yè)}else{if(reg.test(to.path)){next(to.path.replace(reg,’’));return;}next()}})router.afterEach(to=>{NProgress.done();window.scrollTo(0,0);})//處理重復(fù)點(diǎn)擊當(dāng)前頁(yè)菜單,出現(xiàn)警告問(wèn)題const originalPush = VueRouter.prototype.push;VueRouter.prototype.push = function push(location){return originalPush.call(this,location).catch(err=>err);}export default router;
上面的重點(diǎn)如下:
引入插件及對(duì)應(yīng)的css

nprogress配置參數(shù)

3.router.beforeEach路由跳轉(zhuǎn)之前攔截時(shí),加載進(jìn)度條

4.router.afterEach路由跳轉(zhuǎn)結(jié)束后,關(guān)閉進(jìn)度條
3.nprogress插件修改樣式
在App.vue文件中的style樣式中,添加如下代碼,更改進(jìn)度條的顏色
#nprogress .bar { background: #f90 !important; //自定義顏色}
到此這篇關(guān)于vue Nprogress進(jìn)度條功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue Nprogress進(jìn)度條內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 詳解Android studio 動(dòng)態(tài)fragment的用法2. 解決Android studio xml界面無(wú)法預(yù)覽問(wèn)題3. 圖文詳解vue中proto文件的函數(shù)調(diào)用4. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁(yè)效果(實(shí)例代碼)5. php模擬實(shí)現(xiàn)斗地主發(fā)牌6. 什么是python的自省7. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)8. vue 使用localstorage實(shí)現(xiàn)面包屑的操作9. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟10. Vuex localStorage的具體使用

網(wǎng)公網(wǎng)安備