vue nprogressのインストール(進捗バーアニメーション)

# npm

npm install --save nprogress

#導入
index.js src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import NProgress from "nprogress"; //        
//        
NProgress.configure({
     
  showSpinner: false //       ico
});

Vue.use(VueRouter);

const routes = [
  {
     
    path: "/",
    name: "  ",
    component: () => import("@/views/login/index.vue")
  }
];

const router = new VueRouter({
     
  routes
});

/**
 * @description:     
 * @author: chenbz
 * @date: 2021/4/12
 */
router.beforeEach((to, from, next) => {
     
  //        
  NProgress.start();
  next();
});

//      ：     
router.afterEach(() => {
     
  //        
  NProgress.done();
});

export default router;

NProgress.configure({easing:‘ease’,//アニメーション方式speed:500,//インクリメントバーの速度showSpinner:false,//ico trickleSpeed:200をロードするかどうか、//自動インクリメント間隔minimum:0.3//初期化時の最小パーセント})
# CDN
vue.config.js

module.exports = {
  //     CDN
  configureWebpack: {
    externals: {
      nprogress: "NProgress"
    }
  },
};

index.html

<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js">

#参考ブログ

公式文書

Vueプロジェクトページジャンプ時のブラウザウィンドウ上の進捗バーは

を表示する.