Bootstrap

在Vue中使用NProgress可以实现页面加载时的进度条效果

在Vue中使用NProgress实现进度条效果的步骤如下:

1. 首先,安装NProgress库。

npm install --save nprogress

2. 在main.js文件中,引入NProgress和其对应的样式文件。

import { createApp } from 'vue'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const app = createApp(App)
app.use(NProgress)

3. 创建一个全局的路由守卫,在路由跳转前启动进度条,在路由跳转后结束进度条。

import router from './router'

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

4. 在Vue的根组件中,使用`<router-view></router-view>`来渲染路由组件。

通过以上步骤,我们就可以在Vue3中使用NProgress实现进度条效果了。

注意:在Vue3中,NProgress作为Vue3插件的使用方式稍有不同,但原理是一样的。当然,你也可以根据自己的需求,进一步自定义NProgress的样式和行为。
 

;