naive 路由使用 loadingBar 进度条

环境

“devDependencies”: {
“@vitejs/plugin-vue”: “^4.2.3”,
“axios”: “^1.4.0”,
“less”: “^4.1.3”,
“less-loader”: “^11.1.3”,
“naive-ui”: “^2.34.4”,
“pinia”: “^2.1.4”,
“typescript”: “^5.1.6”,
“vite”: “^4.3.9”,
“vue”: “^3.3.4”,
“vue-router”: “^4.2.2”,
“vue-tsc”: “^1.8.4”
}

router.ts 代码

import { ref } from 'vue';
import {createRouter,createWebHistory} from 'vue-router'
// 1.单独使用 loadingBar 进度条
import { createDiscreteApi} from 'naive-ui'
const {loadingBar} = createDiscreteApi(['loadingBar'])// 动态路由 引入文件
// 路由信息
const routes = [...]
// 路由器实例
const router = createRouter({history: createWebHistory(),routes
})
export const Sleep = (ms:number)=> {return new Promise(resolve=>setTimeout(resolve, ms))}
// 设置前置路由守卫
router.beforeEach((to,from,next)=>{// 路由中导入-开始loadingBar.start()next()
})
// 设置后置路由守卫
router.afterEach((to,from,next)=>{// 路由中导入-结束loadingBar.finish()
})// 对外暴露
export default router

naive 路由使用 loadingBar 进度条相关推荐

【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
vue 路由进度条 nprogress
阅读目录阐述 1 vue 安装 nprogress 2 路由文件中引入依赖源码 router\index.js 阐述下面看下 Vue 使用 NProgress 的方法 NProgress 是页面 ...
iview地区加载_LoadingBar 加载进度条
LoadingBar 加载进度条概述全局创建一个显示页面加载.异步请求.文件上传等的加载进度条. 说明 LoadingBar 只会在全局创建一个,因此在任何位置调用的方法都会控制这同一个组件.主要 ...
vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话第412篇// 正文共:1800 字// 预计阅读时间:8 分钟简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
移动端video隐藏进度条_机器学习模型部署--打通前后端任督二脉
前言没有 GPU,没有服务器?滴滴云 GPU 服务器,8GB内存/8GB显卡,优惠期内2200元包年.别急,输入AI 大师码:8754,折扣价基础上,再加9折优惠.快速链接:滴滴云 AI 特权学历 ...
手把手教你实现一个 Vue 进度条组件！
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
vue实现竖式步骤条_手把手教你实现一个 Vue 进度条组件！
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条
简介:NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 文章目录: 一.NProgress 安装二.NProgress 使用三.NProgress 配置四.Vue 中修改进度条颜色 ...
Vue项目实战06：nprogress页面加载进度条
博客: https://lvsige.top/ nprogress页面加载进度条前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们 ...

naive 路由使用 loadingBar 进度条

环境

naive 路由使用 loadingBar 进度条相关推荐

最新文章

热门文章