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

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

然而，路由懶加載會使得我們在第一次打開一個新頁面的時候，會有一個加載時間。如果在這個時候我們沒有一個提示的話，給人的感覺會是好像我點了頁面跳轉但是沒反應。所以，這個時候我們可以加一個進度條來告知用戶。

具體實現，我們使用NProgress這個滾動條效果插件。

1.安裝：

cnpm install --save nprogress

2.在main.js中引入：

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

3.在main.js中進行配置：

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

4.在main.js中對路由鉤子進行設置：

 //當路由進入前
 router.beforeEach((to, from , next) => {
  // 每次切換頁面時，調用進度條
 NProgress.start();
 　　// 若加載時間長且不定，擔心進度條走完都沒有加載完，可以調用
　　NProgress.inc（）；//這會以隨機數量遞增，且永遠達不到100%，也可以設指定增量
 next();
 });
//當路由進入后：關閉進度條
router.afterEach(() => { 
 // 在即將進入新的頁面組件前，關閉掉進度條
 NProgress.done()
})

補充：vue頁面跳轉方法

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

<router-link to="/path"><button>跳轉</button></router-link>

但是有時的需求是頁面不直接跳轉，有確認彈框或者其他事件，此時就需要在js中設置跳轉，方法如下：

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

總結

到此這篇關于Vue項目頁面跳轉時瀏覽器窗口上方顯示進度條功能的文章就介紹到這了,更多相關vue 頁面跳轉進度條內容請搜索創新互聯以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持創新互聯！

網頁標題：Vue項目頁面跳轉時瀏覽器窗口上方顯示進度條功能
網址分享：http://vcdvsql.cn/article10/pehdgo.html

成都網站建設公司_創新互聯，為您提供App開發、微信公眾號、網站內鏈、做網站、網站建設、網站收錄

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯