Vue中使用NProgress实现页面加载效果

第一步:导入包 npm install nprogress
第二步 :引入文件

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

第三步 : 实现加载效果

NProgress.start(); //开始加载
NProgress.done();  //加载结束

案例 :

import NProgress from 'nprogress' 
import 'nprogress/nprogress.css' 
axios.defaults.baseURL = `http://nodeshop.lzcstudy.top/api/private/v1/` 
axios.interceptors.request.use(config => {
 // console.log(config)
 NProgress.start();
 config.headers.Authorization = window.sessionStorage.getItem('token')
 return config;
})
axios.interceptors.response.use(config => {
 // console.log(config)
 NProgress.done();
 return config;
})

详细内容 : https://www.npmjs.com/package/nprogress

上一篇:Python 请求数据


下一篇:从.net开发做到云原生运维(六)——分布式应用运行时Dapr