概述

在 Web 开发中，用户界面的流畅性和交互性对用户体验至关重要。为了在页面跳转时给用户提供反馈，我们可以利用 NProgress 这样的第三方库来实现一个进度条。本文档将指导您如何在 Vue 项目中结合路由鉴权来实现这一功能。

准备工作

确保您已经安装了以下依赖项：

• Node.js 和 npm
• Vue CLI
• Vue Router
• NProgress

步骤一：安装依赖

首先，在您的 Vue 项目中安装 vue-router 和 nprogress：

npm install vue-router

npm i nprogress

步骤二：配置路由

在您的项目中设置 Vue Router，并配置基本的路由规则。

1. 创建 src/router/index.js

这里就是正常配置就ok了

2.创建 permission.ts

与main.ts同级

//路由鉴权，项目当中路由能不能被权限的设置（某一个路由什么条件下可以访问，什么条件下不可以访问）
import router from '@/router'
import nprogress from 'nprogress'
//引入进度条的样式
import 'nprogress/nprogress.css'
//全局守卫：项目当中任意路由都会触发的钩子
//全局前置守卫
router.beforeEach((to, from, next) => {
    // to:你将要访问那个路由
    // from:你从哪个路由来
    // next:放行函数，放行到哪一个路由
    console.log(11111);
    nprogress.start();
    next();
})
//全局后置守卫
router.afterEach((to, from) => {
    nprogress.done();
})

逐步解析

1. 引入 NProgress

   • import nprogress from 'nprogress';：导入 NProgress 库。
   • import 'nprogress/nprogress.css';：导入 NProgress 的 CSS 样式文件，用于渲染进度条的外观。

2. 注册路由守卫

   • router.beforeEach：全局前置守卫，在路由跳转前执行。
   • router.afterEach：全局后置守卫，在路由跳转完成后执行。

3. 全局前置守卫

   • router.beforeEach((to, from, next) => { ... })：每当路由即将改变时，这个函数会被调用。
   • to：即将进入的目标路由。
   • from：当前离开的源路由。
   • next：一个回调函数，用于决定是否允许路由的跳转。
   • nprogress.start();：启动 NProgress 进度条。
   • next();：放行路由，允许路由跳转继续进行。

4. 全局后置守卫

   • router.afterEach((to, from) => { ... })：每当路由跳转完成时，这个函数会被调用。
   • to：跳转后的目标路由。
   • from：跳转前的源路由。

进度条的工作流程

1. 启动进度条

   • 当路由即将改变时（即 beforeEach 守卫被触发时），调用 nprogress.start() 启动进度条。
   • 这意味着进度条会在页面开始加载新内容时立即显示。

2. 结束进度条

   • 当路由跳转完成后（即 afterEach 守卫被触发时），调用 nprogress.done() 结束进度条。
   • 这意味着进度条会在页面完成加载新内容后立即消失。

整体流程

1. 用户点击链接或进行路由跳转。
2. beforeEach 守卫被触发。
3. 启动 NProgress 进度条。
4. 放行路由，允许跳转继续。
5. 路由跳转完成后，afterEach 守卫被触发。
6. 结束 NProgress 进度条。