vue 项目优化——进度条控制

需求描述

1. 为了增加用户体验，在每次路由跳转时增加进度条控制
2. 进度条在页面的最上方显示

思路分析

1. 既然是在路由跳转时增加，那我们编写代码的位置应该放到路由前置守卫里
2. 在守卫的开始处展示进度条，在跳转完毕之后隐藏进度条
3. 查找现成的插件，完成需求 - 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()
})

经验总结

1. 前端的工作中，用户体验也是一个不得忽视的问题，尤其是在异步操作或者页面切换的时候，给到用户一个及时的反馈，能够有效的减少用户的等待焦虑
2. 将来我们的路由控制里还会包含异步请求，此时我们的进度条就很有用了