硅谷甄选_进度条效果

业务逻辑

• 全局导航守卫：vue-router有全局导航守卫，任意路由变化都能触发；
  • 全局前置守卫：访问路由之前执行；（这时候可以出现进度条；）
  • 全局后置守卫：访问路由完毕后执行；（这时候进度条可以消失；）
• 路由鉴权：项目中路由，什么情况下能访问，什么情况下不能访问，这种判断叫路由鉴权；
  • 用户未登录：只能访问login，其他不能访问；
  • 用户登录了：不能访问login；
  • 访问菜单里的路由，前提是必须有用户信息；
  • 这些问题，都可以通过全局导航守卫来解决；
  • 任意路由切换都会触发全局导航守卫，判断有没有用户信息，如果有，那么就放行；如果没有，就获取用户信息，再放行；

全局守卫

在src下新建了一个permisstion.ts文件

安装nprogress插件

npm官网查看nprogress的基本使用，如上；

修改nprogress进度条的样式