VitePress

Appearance

Vue3 使用 NProgress 进度条 改善页面加载效果 ​

安装依赖 ​

bash
$ npm install --save nprogress @types/nprogress

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

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

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

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

完整的路由文件 ​

ts
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

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

别人贴出来的代码是：

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

一运行就报错了：

text

复制代码

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

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

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

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

原文如下：

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

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

参考链接： ​

https://juejin.cn/post/7083780447129468941