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

本文主要是介绍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

这篇关于Vue中使用NProgress实现页面加载效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！