Vue中NProgress进度条使用教程

2022-11-18 17:23:54 浏览数 (1)

安装

npm安装

代码语言:javascript复制
npm install --save nprogress

或CDN引入

代码语言:javascript复制
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

导入

代码语言:javascript复制
// 导入nprogress.js
import NProgress from 'nprogress';
// 导入nprogress的样式
import 'nprogress/nprogress.css';

使用

代码语言:javascript复制
// 定义路由导航前置守卫
router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});
// 定义路由导航后置守卫
router.afterEach((to, from) => {
  NProgress.done();
});

官方地址:https://github.com/rstacruz/nprogress

0 人点赞