需求描述
- 为了增加用户体验,在每次路由跳转时增加进度条控制
- 进度条在页面的最上方显示
思路分析
- 既然是在路由跳转时增加,那我们编写代码的位置应该放到路由前置守卫里
- 在守卫的开始处展示进度条,在跳转完毕之后隐藏进度条
- 查找现成的插件,完成需求 - NProgress GitHub - rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc
核心代码:
// 这里编写路由权限控制代码
import store from '@/store'
import router from '@/router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
const WHITE_LIST = ['/login', '/404']
router.beforeEach((to, from, next) => {
// 开启进度条
NProgress.start()
if (store.state.user.token) {
if (to.path === '/login') {
next('/')
} else {
next()
}
} else {
if (WHITE_LIST.includes(to.path)) {
next()
} else {
next('/login')
}
}
// 技术进度条
NProgress.done()
})
经验总结
- 前端的工作中,用户体验也是一个不得忽视的问题,尤其是在异步操作或者页面切换的时候,给到用户一个及时的反馈,能够有效的减少用户的等待焦虑
- 将来我们的路由控制里还会包含异步请求,此时我们的进度条就很有用了