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