添加路由切换进度条

nprogress 插件

使用 nprogress 插件可以实现路由切换进度动画，步骤如下

1. 安装 nprogress

npm install --save nprogress

2. 在 main.js 中引入 nprogress 样式

import { createApp } from 'vue'
import App from './App.vue'

// 从 route.js 导出路由数据
import router from "./route.js";

import 'nprogress/nprogress.css';

const app = createApp(App);
// 使用路由
app.use(router);
app.mount('#app');

3. 利用路由守卫添加进度动画

import NProgress from 'nprogress';
NProgress.configure({     
    easing: 'ease',  // 动画方式    
    speed: 500,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
});
import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
	history : createWebHashHistory(),
	routes  : routes
});
router.beforeEach((to, from) => {
	NProgress.start();
	console.log(to, from);
	// 自己的路由拦截逻辑代码
	// 比如拦截 User 路由
	console.log(to.path);
	if(to.path == '/User'){
		return false;
	}
});
router.afterEach((to, from) => {
	NProgress.done()
})