首先安装npm i nprogress
# 或者
yarn add nprogress
除了功能外，进度条还有样式，首先需要在main.js中引入样式import 'nprogress/nprogress.css'
在router/index.js中，引入该模块import nprogress from 'nprogress'
在全局前置守卫中 路由跳转之前去开启nprogressrouter.beforeEach((to,from,next)=>{
//在路由跳转之前开启
nprogress.start()
//只要访问的不是登录/login 就跳转到/login
if(to.path === '/login'){
next()
}else{
//拿到localstorage中的token
const token = localStorage.getItem('token')
if(token){
//如果访问的不是login 但是已经登录了 则正常跳转
next()
}else{
next('/login')
}
}
})
在路由跳转结束之后（路由后置钩子）调用done方法结束//路由后置钩子
router.afterEach(()=>{
//路由跳转结束之后 进度条结束
nprogress.done()
})
如以下效果}

您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
成就一亿技术人!
hope_wisdom 发出的红包
实付元使用余额支付
点击重新获取
钱包余额
0
抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。余额充值
}