本文已参与「新人创作礼」活动，一起开启掘金创作之路。

安装依赖

yarn add nprogress @types/nprogress

添加到已有的routes/index.ts文件里

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 页面渲染成功之后，展示进度条（实际效果：Mac的Chrome就是在页面顶部有条2px左右的进度条）
router.beforeEach(async (to, from) => {
  NProgress.start()
})

// 页面加载成功之后，关闭进度条
router.afterEach(to => {
  NProgress.done()
})

完整的路由文件

import { createRouter, createWebHashHistory } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/edit',
    name: 'EditOrder',
    component: () => import('@/views/editOrder.vue'),
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

router.beforeEach(async (to, from) => {
  NProgress.start()
})

router.afterEach(to => {
  NProgress.done()
})

export default router

参考了这篇简洁易懂的博客：xknote.com/blog/351596…

一开始，看的是别的博客（不得不吐槽必应的搜索还有待提升，常常把过时的或是不适合当前场景的博客展示的前几位，即使是给时间加筛、只看去年到现在的，也往往也打开好几个网页，才能找到正确有用的；所以，上班时间能用谷歌还是挺爽的） 别人贴出来的代码是：

router.beforeEach((to,from,next)=>{ 
  NProgress.start() 
}) 
router.afterEach((to,from,next)=>{ 
  NProgress.done() 
})

一运行就报错了：

Error: Invalid navigation guard
    at vue-router.esm-bundler.js:1945:47
triggerError @ vue-router.esm-bundler.js:3302

而且报错之前还有告警提示：

[Vue Router warn]: The "next" callback was never called inside of :
async (to, from, next) => {
  NProgress.start();
}
. If you are returning a value instead of calling "next", make sure to remove the "next" parameter from your function.
warn @ vue-router.esm-bundler.js:72

查了vue-router的官方文档，发现如果无需处理next的话，是可以不把它加进来的 router.vuejs.org/zh/guide/ad…

原文如下：

如果什么都没有，undefined 或返回 true，则导航是有效的，并调用下一个导航守卫

总结：资讯的来源一般是官方文档比较靠谱，技术的提升则练习往往是有效的途径~