我是 vuejs 的新手,我想将 nprogress 与 vuejs 代码拆分功能一起使用。基本上我在使用导航到页面时想要 nprogress。要求是在组件承诺无法解决之前显示进度。如何在我的应用程序中添加此功能?
这是我的代码:
import Vue from 'vue'
import Router from 'vue-router'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css';
// layout components
import Full from '../container/Full'
function asyncComponent(importComponent) {
return importComponent()
Nprogress.start();
importComponent().then(() => {
Nprogress.done();
return importComponent();
})
}
// dashboard components
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Full,
redirect: '/dashboard/dashboard-v1',
children: [
{
path: '/dashboard/dashboard-v1',
component: asyncComponent(() => import('../views/dashboard/DashboardOne')),
meta: {
title: 'Dashboard V1',
breadcrumb: 'Dashboard / Dashboard V1'
}
},
{
path: '/dashboard/dashboard-v2',
component: asyncComponent(() => import('../views/dashboard/DashboardTwo')),
meta: {
title: 'Dashboard V2',
breadcrumb: 'Dashboard / Dashboard V2'
}
}
]
},
{
path: '/session/sign-up',
component: asyncComponent(() => import('../views/SignUp')),
meta: {
title: 'Sign Up',
breadcrumb: 'Session / Sign Up'
}
},
{
path: '/session/login',
component: asyncComponent(() => import('../views/Login')),
meta: {
title: 'Login',
breadcrumb: 'Session / Login'
}
},
{
path: '/session/lock-screen',
component: asyncComponent(() => import('../views/LockScreen')),
meta: {
title: 'Lock Screen',
breadcrumb: 'Session / Lock Screen'
}
}
]
})