通过nprogress组件来实现进度条功能
yarn add nprogress
在router.js里面使用
import Vue from 'vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress'
import Login from '../views/Login.vue'
import 'nprogress/nprogress.css'// nprogress样式文件
Vue.use(VueRouter)
const routes = [
{
path:'/login',
name: 'login',
component: Login,
}
]
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) => {
NProgress.start();
next();
})
//当路由跳转结束后
router.afterEach(() => {
// 关闭进度条
NProgress.done()
})
export default router