目标:
使用 nprogress 库完成切换路由时 顶部进度条加载
1.安装插件
pnpm add nprogress
pnpm add @types/nprogress -D
或
npm install nprogress
npm install @types/nprogress -D
2.引入nprogress库 和 nprogress样式在router文件内
import NProgress from 'nprogress'import 'nprogress/nprogress.css'
3.切换路由前开启
router.beforeEach(to => {NProgress.start()
})
4.路由切换完毕后关闭
router.afterEach(to => {NProgress.done()
})
5.关闭右上角 小圆圈默认加载
NProgress.configure({showSpinner: false
})
6.修改进度条颜色 ,全局样式文件 main.scss
#nprogress .bar { background-color: #16C2A3 !important;
}
注意: 如果你的typescript插件报错
can only be default-imported using the 'esModuleInterop' flagts(1259) index.d.ts(45, 1): This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag. import NProgress
解决报错:
在 "compilerOptions"
部分中添加 "esModuleInterop": true
。
{"compilerOptions": {"esModuleInterop": true,// 其他选项...},// 其他配置...
}
另外需要配置路由的教程查看这文章
Vue3/ Vue3内 Vue-router Vue3路由 完整配置流程_vue3 router 配置_春暖花开.,的博客-CSDN博客