158 lines
3.6 KiB
JavaScript
158 lines
3.6 KiB
JavaScript
import { createRouter, createWebHistory } from 'vue-router'
|
|
import { createApp, h } from 'vue'
|
|
import NProgress from 'nprogress'
|
|
import 'nprogress/nprogress.css'
|
|
|
|
NProgress.configure({
|
|
easing: 'ease',
|
|
speed: 500,
|
|
showSpinner: true,
|
|
trickleSpeed: 200,
|
|
minimum: 0.3
|
|
})
|
|
|
|
const style = document.createElement('style')
|
|
style.innerHTML = `
|
|
#nprogress {
|
|
z-index: 9999 !important;
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
#nprogress .bar {
|
|
background: #f472b6 !important;
|
|
height: 3px !important;
|
|
box-shadow: 0 0 5px rgba(244, 114, 182, 0.7) !important;
|
|
}
|
|
#nprogress .peg {
|
|
box-shadow: 0 0 15px #f472b6, 0 0 10px #f472b6 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
#nprogress .spinner-icon {
|
|
border-top-color: #f472b6 !important;
|
|
border-left-color: #f472b6 !important;
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|
|
|
|
let loadingApp = null;
|
|
let loadingNode = null;
|
|
|
|
const router = createRouter({
|
|
history: createWebHistory(import.meta.env.BASE_URL),
|
|
routes: [
|
|
{
|
|
path: '/',
|
|
name: 'Index',
|
|
component: () => import('./views/Loading.vue'),
|
|
meta: { requiresIndexLoading: true }
|
|
},
|
|
{
|
|
path: '/datascreen',
|
|
name: 'Datascreen',
|
|
component: () => import('./views/Index.vue')
|
|
},
|
|
{
|
|
path: '/category',
|
|
name: 'Category',
|
|
component: () => import('./views/Index.vue')
|
|
},
|
|
{
|
|
path: '/datasource',
|
|
name: 'Datasource',
|
|
component: () => import('./views/Index.vue')
|
|
},
|
|
{
|
|
path: '/record',
|
|
name: 'Record',
|
|
component: () => import('./views/Index.vue')
|
|
},
|
|
{
|
|
path: '/components',
|
|
name: 'Components',
|
|
component: () => import('./views/Index.vue')
|
|
},
|
|
{
|
|
path: '/variables',
|
|
name: 'Variables',
|
|
component: () => import('./views/Index.vue')
|
|
},
|
|
{
|
|
path: '/files',
|
|
name: 'Files',
|
|
component: () => import('./views/Index.vue')
|
|
},
|
|
{
|
|
path: '/maps',
|
|
name: 'Maps',
|
|
component: () => import('./views/Index.vue')
|
|
},
|
|
{
|
|
path: '/tools',
|
|
name: 'Tools',
|
|
component: () => import('./views/Index.vue')
|
|
},
|
|
{
|
|
path: '/build',
|
|
name: 'Build',
|
|
component: () => import('./views/Build.vue')
|
|
},
|
|
{
|
|
path: '/:pathMatch(.*)*',
|
|
name: 'NotFound',
|
|
component: () => import('./views/NotFound.vue')
|
|
},
|
|
],
|
|
})
|
|
|
|
router.beforeEach(async (to, from, next) => {
|
|
if (!to.meta.requiresIndexLoading) {
|
|
NProgress.start()
|
|
} else {
|
|
NProgress.done()
|
|
NProgress.remove()
|
|
|
|
loadingNode = document.createElement('div');
|
|
loadingNode.id = 'custom-loading';
|
|
document.body.appendChild(loadingNode);
|
|
|
|
try {
|
|
const LoadingComponent = (await import('@/components/layout/Loading.vue')).default;
|
|
loadingApp = createApp({
|
|
render: () => h(LoadingComponent)
|
|
});
|
|
loadingApp.mount(loadingNode);
|
|
} catch (error) {
|
|
console.error('Failed to load custom loading component:', error);
|
|
NProgress.start();
|
|
document.body.removeChild(loadingNode);
|
|
loadingNode = null;
|
|
}
|
|
}
|
|
|
|
next();
|
|
});
|
|
|
|
router.afterEach((to) => {
|
|
if (to.meta.requiresIndexLoading && loadingApp) {
|
|
setTimeout(() => {
|
|
if (loadingApp) {
|
|
loadingApp.unmount();
|
|
loadingApp = null;
|
|
}
|
|
|
|
if (loadingNode && document.body.contains(loadingNode)) {
|
|
document.body.removeChild(loadingNode);
|
|
loadingNode = null;
|
|
}
|
|
}, 3000);
|
|
}
|
|
|
|
if (!to.meta.requiresIndexLoading && NProgress.isStarted()) {
|
|
NProgress.done();
|
|
}
|
|
});
|
|
|
|
export default router
|