加盟网站建设服务,百度搜不到自己的网站,网站开发专业分析,做网站客户改来改去前言
在PC端项目的开发过程中#xff0c;有时我们需要给项目添加一个进度条来展示界面是否已经完成加载的情况。那么如何才能成功添加进度条呢#xff1f;
添加方式
用法1: 在拦截器中使用 1.引入插件Nprogress npm install --save nprogress 2.在main.js中引入对应的包文…前言
在PC端项目的开发过程中有时我们需要给项目添加一个进度条来展示界面是否已经完成加载的情况。那么如何才能成功添加进度条呢
添加方式
用法1: 在拦截器中使用 1.引入插件Nprogress npm install --save nprogress 2.在main.js中引入对应的包文件 import NProgress from ‘nprogress’ import ‘nprogress/nprogress.css’ 3.展示进度条我选择的时间是发送request请求的时候展示因为我的界面使用了created钩子函数去获得后端的数据也可以写在路由跳转之前展示 axios.interceptors.request.use(config { NProgress.start() return config }) 3.隐藏进度条在response拦截器中隐藏证明已经返回了数据界面已经加载 axios.interceptors.response.use(config { NProgress.done() return config }) 4.附上该插件的GitHub地址里面有使用的详细信息 https://github.com/rstacruz/nprogress
用法2: 在路由跳转之前展示 1,安装
npm install NProgress --save--dev2,调用
import NProgress from nprogress
import nprogress/nprogress.css3,配置
NProgress.configure({ showSpinner: false }); // 去掉右侧加载圆圈//切换页面的时候调用
router.beforeEach((to, from, next) {NProgress.start(); // start progress barnext();
});router.afterEach(() {NProgress.done();
});
