show

一、nprogress

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

二、配置vue項(xiàng)目

安裝

npm install --save nprogress

使用

// 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 ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//進(jìn)度條
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import App from './App'
import router from './router'

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

router.beforeEach((to, from , next) => {
  // 每次切換頁(yè)面時(shí)，調(diào)用進(jìn)度條
  NProgress.start();
  // 這個(gè)一定要加，沒(méi)有next()頁(yè)面不會(huì)跳轉(zhuǎn)的。這部分還不清楚的去翻一下官網(wǎng)就明白了
  next();
})
router.afterEach(() => {
  // 在即將進(jìn)入新的頁(yè)面組件前，關(guān)閉掉進(jìn)度條
  NProgress.done()
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

全局定義顏色

image.png

  /*進(jìn)度條顏色*/
  #nprogress .bar {
    background: blue !important;
  }