vue中配置nprogress 页面顶部进度条(在vue路由守卫和路由后置)

最新推荐文章于 2024-07-31 10:18:07 发布

人间草木96

最新推荐文章于 2024-07-31 10:18:07 发布

阅读量2.4k

点赞数 2

分类专栏：个人总结 vue

本文链接：https://blog.csdn.net/qq_43258252/article/details/87436685

版权

本文介绍如何在Vue项目中使用NProgress组件，通过在main.js中导入和配置，实现在路由切换时展示页面顶部进度条的效果。

摘要由CSDN通过智能技术生成

1. 安装

npm install nprogress --save

2. 在main.js中导入

源码~~~~~~方便你复制

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import moment from './plugins/moment'
import axios from './plugins/axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { base } from './router/config'

Vue.use(iView)
Vue.use(moment)
Vue.use(axios)

Vue.config.productionTip = false

// 配置NProgress进度条选项  —— 动画效果
NProgress.co