在vue項(xiàng)目中，為了減少首屏加載的時(shí)間，通常會(huì)開啟路由的懶加載。路由懶加載配合gizp確實(shí)能幫助我們大大的加快首屏的加載時(shí)間。

開魯ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

然而，路由懶加載會(huì)使得我們?cè)诘谝淮未蜷_一個(gè)新頁(yè)面的時(shí)候，會(huì)有一個(gè)加載時(shí)間。如果在這個(gè)時(shí)候我們沒(méi)有一個(gè)提示的話，給人的感覺會(huì)是好像我點(diǎn)了頁(yè)面跳轉(zhuǎn)但是沒(méi)反應(yīng)。所以，這個(gè)時(shí)候我們可以加一個(gè)進(jìn)度條來(lái)告知用戶。

具體實(shí)現(xiàn)，我們使用NProgress這個(gè)滾動(dòng)條效果插件。

1.安裝：

cnpm install --save nprogress

2.在main.js中引入：

 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'

3.在main.js中進(jìn)行配置：

NProgress.configure({  
 easing: 'ease', // 動(dòng)畫方式 
 speed: 500, // 遞增進(jìn)度條的速度 
 showSpinner: false, // 是否顯示加載ico 
 trickleSpeed: 200, // 自動(dòng)遞增間隔 
 minimum: 0.3 // 初始化時(shí)的最小百分比
})

4.在main.js中對(duì)路由鉤子進(jìn)行設(shè)置：

 //當(dāng)路由進(jìn)入前
 router.beforeEach((to, from , next) => {
  // 每次切換頁(yè)面時(shí)，調(diào)用進(jìn)度條
 NProgress.start();
 　　// 若加載時(shí)間長(zhǎng)且不定，擔(dān)心進(jìn)度條走完都沒(méi)有加載完，可以調(diào)用
　　NProgress.inc（）；//這會(huì)以隨機(jī)數(shù)量遞增，且永遠(yuǎn)達(dá)不到100%，也可以設(shè)指定增量
 next();
 });
//當(dāng)路由進(jìn)入后：關(guān)閉進(jìn)度條
router.afterEach(() => { 
 // 在即將進(jìn)入新的頁(yè)面組件前，關(guān)閉掉進(jìn)度條
 NProgress.done()
})

補(bǔ)充：vue頁(yè)面跳轉(zhuǎn)方法

vue2.0在使用的過(guò)程中， .vue文件之間的跳轉(zhuǎn)，需要在router里面配置path，通過(guò)路徑跳轉(zhuǎn)，html文件跳轉(zhuǎn)如下：

<router-link to="/path"><button>跳轉(zhuǎn)</button></router-link>

但是有時(shí)的需求是頁(yè)面不直接跳轉(zhuǎn)，有確認(rèn)彈框或者其他事件，此時(shí)就需要在js中設(shè)置跳轉(zhuǎn)，方法如下：

this.$ router.push({path: ‘/…'}); path為跳轉(zhuǎn)路徑，此方法會(huì)產(chǎn)生歷史記錄
this.$ router.push({name:'…'}) name也可以作為路由跳轉(zhuǎn)
this.$ router.push({path:‘home',query:{obj:'…'}}) query：參數(shù)，可通過(guò)this.$ route.query.obj獲取
this.$ router.push({path:‘home',params:{obj:'…'}}) query：參數(shù)，可通過(guò)this.$route.params.obj獲取
this.$router.replace() 此方法不會(huì)產(chǎn)生歷史記錄
this.$router.go(n) 向前或向后跳轉(zhuǎn)n個(gè)頁(yè)面

總結(jié)

到此這篇關(guān)于Vue項(xiàng)目頁(yè)面跳轉(zhuǎn)時(shí)瀏覽器窗口上方顯示進(jìn)度條功能的文章就介紹到這了,更多相關(guān)vue 頁(yè)面跳轉(zhuǎn)進(jìn)度條內(nèi)容請(qǐng)搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！

網(wǎng)頁(yè)標(biāo)題：Vue項(xiàng)目頁(yè)面跳轉(zhuǎn)時(shí)瀏覽器窗口上方顯示進(jìn)度條功能
網(wǎng)址分享：http://www.yijiale78.com/article10/pehdgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、微信公眾號(hào)、網(wǎng)站內(nèi)鏈、做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)