vue3中使用NProgress的用法
warning:
这篇文章距离上次修改已过205天，其中的内容可能已经有所变动。
在Vue 3中使用NProgress，首先需要安装NProgress库：
npm install nprogress --save然后在你的Vue应用中引入并配置NProgress。以下是一个基本的例子：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import NProgress from 'nprogress'; // 引入nprogress
import 'nprogress/nprogress.css'; // 引入样式
const app = createApp(App);
router.beforeEach(() => {
NProgress.start(); // 路由进入前开始
});
router.afterEach(() => {
NProgress.done(); // 路由进入后结束
});
app.use(router).mount('#app');在上述代码中，我们在路由切换前后分别使用NProgress.start()和NProgress.done()来控制进度条的显示。这样，每次页面加载时，NProgress会在路由切换时显示加载进度条，页面加载完成后消失。
评论已关闭