Vue 项目中使用路由鉴权实现网页进度条

概述

在 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