效果图
1、npm install nprogress --save
2、在router文件的index.js中导入如下代码
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
3、设置全局路由前置守卫和全局路由后置钩子,来实现进度条的显示与完成。
router.beforeEach((to, from, next) => {
NProgress.start() // 显示进度条
next()
})
router.afterEach(() => {
NProgress.done() // 完成进度条
})
另附上全部代码
// 这两句代码必须放到加载Vue实例的上面。
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import Vue from 'vue'
import Router from 'vue-router'
import routes from './router'
Vue.use(Router)
const router = new Router({
// mode: 'history',
// base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
NProgress.start() // 显示进度条
next()
})
router.afterEach(() => {
NProgress.done() // 完成进度条
})
export default router