How to Fix Vue Route Style Conflicts with Lazy Loading

Background

Hello, I am Shi Xiaoshi, an open‑source contributor who focuses on micro‑frontend architecture and AI‑related engineering. After a recent route migration, a side drawer lost its Cancel button and its layout became malformed.

Debugging revealed a conflict between a global .line style and the drawer footer .m-drawer-container-footer.line style.

The .line style actually originated from another route page that defined a global .line rule, causing unintended style leakage.

Why Routes Can Affect Each Other

The root cause is "style pollution". The problematic page was never manually visited, yet its CSS was loaded because the route was defined with a synchronous import:

import RectificationOrder from '@/views/rectificationOrder/index';
const RECTIFICATION_ORDER = [
    {
        path: '/rectification-order',
        name: 'rectification-order',
        component: RectificationOrder,
        children: []
    }
];

This synchronous import causes the page’s JavaScript and CSS to be fetched during application initialization, injecting its styles globally before the page is activated.

Solution: Route Lazy Loading

Replace the synchronous component with an asynchronous import using Vue Router’s lazy‑loading syntax:

const RECTIFICATION_ORDER = [
  {
    path: '/rectification-order',
    name: 'rectification-order',
    component: () => import('@/views/rectificationOrder/index'),
    children: [],
  },
];

With this change, the component’s resources are loaded only when the route is first visited, preventing premature style injection.

Benefits of Route Lazy Loading

Optimizes first‑screen load performance by loading only the needed route components.

Reduces initial bundle size and eases browser load.

Avoids style pollution caused by early CSS injection, as demonstrated in this case.

Vue Router supports the component: () => import(...) syntax, which leverages Vite’s dynamic module loading for code‑splitting and delayed loading.

Conclusion

Style issues often stem from improper loading order and scope control rather than incorrect CSS. Synchronous component imports can inject styles globally and cause conflicts; using lazy loading resolves the problem, improves performance, and ensures style isolation.