262 Optimization Using Asynchronous Components

步骤

1、main.js中将BaseDialog改成异步

import { createApp, defineAsyncComponent } from 'vue';
import App from './App.vue';
import router from './router.js';
import store from './stores';

import BaseCard from './components/ui/BaseCard.vue';
import BaseButton from './components/ui/BaseButton.vue';
import BaseBadge from './components/ui/BaseBadge.vue';
import BaseSpinner from './components/ui/BaseSpinner.vue';
//import BaseDialog from './components/ui/BaseDialog.vue';

//download the dialog component when it's needed, not at the beginning
const BaseDialog = defineAsyncComponent(() => import('./components/ui/BaseDialog.vue'));

const app = createApp(App);

app.use(router);
app.use(store);

app.component('base-card', BaseCard);
app.component('base-button', BaseButton);
app.component('base-badge', BaseBadge);
app.component('base-spinner', BaseSpinner);
app.component('base-dialog', BaseDialog);

app.mount('#app');

2、router.js路由组件改成异步

import { defineAsyncComponent } from "vue";
import { createRouter, createWebHistory } from "vue-router";

// import CoachDetail from "./pages/coaches/CoachDetail.vue";
//import CoachesList from "./pages/coaches/CoachesList.vue";
//import CoachRegistration from "./pages/coaches/CoachRegistration.vue";
//import ContactCoach from "./pages/requests/ContactCoach.vue";
//import RequestsReceived from "./pages/requests/RequestsReceived.vue";
// import UserAuth from "./pages/auth/UserAuth.vue";
// import NotFound from "./pages/NotFound.vue";
import store from "./stores/index.js";

const CoachDetail = defineAsyncComponent(() => import("./pages/coaches/CoachDetail.vue"));
const CoachesList = defineAsyncComponent(() => import("./pages/coaches/CoachesList.vue"));
const CoachRegistration = defineAsyncComponent(() => import("./pages/coaches/CoachRegistration.vue"));
const ContactCoach = defineAsyncComponent(() => import("./pages/requests/ContactCoach.vue"));
const RequestsReceived = defineAsyncComponent(() => import("./pages/requests/RequestsReceived.vue"));
const UserAuth = defineAsyncComponent(() => import("./pages/auth/UserAuth.vue"));
const NotFound = defineAsyncComponent(() => import("./pages/NotFound.vue"));

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', redirect: '/coaches' },
        { path: '/coaches', component: CoachesList },
        {
            path: '/coaches/:id',
            component: CoachDetail,
            props: true,    // make id available as a prop
            children: [
                { path: 'contact', component: ContactCoach }, // /coaches/1234567890/contact
            ]
        },
        { path: '/register', component: CoachRegistration, meta: { requiresAuth: true } },
        { path: '/requests', component: RequestsReceived, meta: { requiresAuth: true } },
        { path: '/auth', component: UserAuth, meta: { requiresUnauth: true } },
        { path: '/:notFound(.*)', component: NotFound },
    ],
});

//Guard against unauthorized access
router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth && !store.getters.isAuthenticated) {
        next('/auth');
    } else if (to.meta.requiresUnauth && store.getters.isAuthenticated) {
        next('/coaches');
    } else {
        next();
    }
});

export default router;