如何在 NUXT项目中使用 NProgres
Sonder
2021-08-17
861字
2分钟
浏览 (4.2k)
nuxt 本身有自己的 $loading 作为进度条的显示，但是也可以用 nprogress 这个轻量级的插件
首先安装 nprogress
npm i nprogress -S在 nuxt 的工程中有一个 plugins 文件夹中的 router.js 文件中引入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
/*全局配置 加载条*/
NProgress.configure({
// 动画方式
easing: 'ease-out-in',
// 递增进度条的速度
speed: 700,
// 是否显示加载ico
showSpinner: false,
// 自动递增间隔
trickleSpeed: 200,
// 初始化时的最小百分比
minimum: 0.3
})
export default ({ app}) => {
app.router.beforeEach((to, from, next) => { // 进度条开始
NProgress.start();
next()
})
app.router.afterEach((to, from, next) => {
// 进度条结束
NProgress.done();
})
}将 router.js 在项目中引用，需要在 nuxt.config.js 里面
plugins: [
...
{ src: '~/plugins/router.js', ssr: false },
...
]