vue中加载进度条NProgress的使用
2020-07-14 05:26
246 查看
图中蓝色进度条
1、安装
$ npm install --save nprogress 或者 $ yarn add nprogress //用法 NProgress.start(); NProgress.done();`
2、使用
//导入 import NProgress from 'nprogress' import 'nprogress/nprogress.css' router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach(() => { NProgress.done() })
或者使用拦截器
axios.interceptors.request.use(function (config) { NProgress.start() return config; //一定要return config } axios.interceptors.response.use(function (config) { NProgress.done() return config; //一定要return config }
相关文章推荐
- vue-router 懒加载的使用
- vue项目优化之按需加载组件-使用webpack require.ensure
- 全局安装@vue/cli 后使用vue无法加载!
- vue项目优化之按需加载组件-使用webpack require.ensure
- 使用node中的express解决vue-cli加载不到dev-server.js的问题
- vue项目优化之按需加载组件-使用webpack require.ensure
- 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async)
- 如何使用vue-content-loader内容加载器
- vue 插件使用实例 懒加载 layUI
- 使用Vue实现调用接口加载页面初始数据
- vue中使用three,绘制3d场景--obj模型加载
- 详解vue项目优化之按需加载组件-使用webpack require.ensure
- 浅谈vue中使用图片懒加载vue-lazyload插件详细指南
- vue中css预加载使用sass的配置方式
- 使用 Vue.js 实现加载更多功能
- Vue项目使用CDN优化加载
- vue路由组件懒加载介绍及使用
- vue复习-vue-axios从加载到使用
- vue使用mui下拉刷新的坑,不能再次加载下拉刷新的初始化。
- Vue-上拉加载与下拉刷新(mint-ui:loadmore)一个页面使用多个上拉加载后冲突问题...