一、Vue顶部进度条(实战) 1、安装nprogress插件
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
npm install --save nprogress
bower install --save nprogress
2、在main.js中配置nprogress
//导入进度条插件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//全局进度条的配置
NProgress.configure({
showSpinner: true, //加载微调器设置,默认为true
//使用缓动(CSS缓动字符串)和速度(以毫秒为单位)调整动画设置。(默认:ease和200)
easing: 'ease',
speed: 2000,
minimum: 0, //更改启动时使用的最小百分比
})
//对路由钩子函数进行设置
//路由进入前
router.beforeEach((to, from , next) => {
NProgress.start();
next();
});
//路由进入后
router.afterEach(() => {
NProgress.done()
})
3、效果图
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
NProgress.start();
next();
})
router.afterEach(() => {
NProgress.done();
})