超100页多模块权限差异化场景下Vue-Router最佳实践咨询

Hey there! Let's break down your options based on your Laravel + Vue Router setup—especially with 100+ pages, multiple modules, and varying user permissions—to help you pick the best fit.

This is the most straightforward approach, so let's start here.

Pros #

• Unified user experience: No page reloads when switching between modules, and shared state (like login status) stays in sync without extra work.
• Development efficiency: Reuse Vue components, utility functions, and styling systems across all modules. You only need one build pipeline, no repeating configs for each SPA.
• Simpler Laravel integration: Handle permission checks through a single Laravel API layer. Use Vue Router's global guards to validate access for every route consistently.

Cons #

• Bloated initial load: 100+ pages mean a large bundle size, even with lazy loading. First-time users might wait longer for the app to boot up.
• Unwieldy route config: As modules grow, your central router file (or split module routes) can become hard to maintain.
• Permission complexity: Filtering routes for different roles requires careful guard logic—easy to miss edge cases with a large number of routes.

When to use it #

If your modules are tightly coupled (e.g., users frequently toggle between todo and document features) or your team is small and doesn't want to manage multiple build pipelines. Just make sure to:

• Split routes into module-specific files
• Use lazy loading for all views
• Keep permission logic clean in global guards

Example route setup:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import TodoRoutes from './modules/todo'
import DocumentRoutes from './modules/document'
import AdminRoutes from './modules/admin'

const router = createRouter({
  history: createWebHistory(),
  routes: [...TodoRoutes, ...DocumentRoutes, ...AdminRoutes]
})

// Global permission guard
router.beforeEach((to, from, next) => {
  const userPermissions = JSON.parse(localStorage.getItem('permissions'))
  if (to.meta.permission && !userPermissions.includes(to.meta.permission)) {
    next('/403')
  } else {
    next()
  }
})

export default router

Module-specific route file (router/modules/todo.js):

export default [
  {
    path: '/todo',
    name: 'TodoDashboard',
    component: () => import('../views/todo/Dashboard.vue'),
    meta: { permission: 'access_todo' },
    children: [
      {
        path: 'tasks',
        component: () => import('../views/todo/TasksList.vue')
      }
    ]
  }
]

This approach treats each module as its own standalone Vue app.

Pros #

• Fast initial loads: Users only download the code for the module they're accessing. Regular users won't load the heavy admin module code at all.
• Complete module isolation: No cross-module code conflicts. Teams can work on different modules independently, with separate build and deploy cycles.
• Laravel-level permission control: Use Laravel's middleware to block access to entire module SPAs. For example, non-admin users get redirected when trying to access /admin.

Cons #

• Disjointed user experience: Switching modules triggers full page reloads. Syncing state (like login status) requires using cookies or Laravel sessions instead of Vue's internal state.
• Redundant work: Each SPA needs its own Vue, Vue Router, and axios config. You'll have to duplicate common components (navbars, login forms) unless you extract them into a shared package or Laravel Blade component.
• Complex Laravel routing: You'll need to map each module's route prefix to its SPA entry view:

// routes/web.php
Route::middleware('auth')->group(function () {
    Route::get('/todo/{any?}', fn () => view('todo-spa'))->where('any', '.*');
    Route::get('/document/{any?}', fn () => view('document-spa'))->where('any', '.*');

    Route::middleware('admin')->group(function () {
        Route::get('/admin/{any?}', fn () => view('admin-spa'))->where('any', '.*');
    });
});

When to use it #

If your modules are completely disconnected (e.g., admin tools have no overlap with regular user features) or you have large teams that need full autonomy over their module.

This is the sweet spot for your scenario, combining the best of both worlds using a microfrontend framework like qiankun or custom Vue-based microfrontend logic.

Pros #

• Smooth UX + module isolation: Modules load as microapps within a single base SPA—no page reloads, but each module's code stays independent.
• Independent development/deployment: Teams can build and ship their modules without affecting the rest of the app.
• Flexible permissions: The base SPA handles route-based microapp loading, while Laravel validates access at the API level.
• Shared resources: The base app can provide common components, styling, and state management (Pinia/Vuex) that all microapps can reuse.

How to implement it #

1. Use Laravel as your backend API and static file host for all SPAs.
2. Build a lightweight base SPA that handles navigation, global state, and permission checks.
3. Each module (todo, document, admin) is a standalone Vue microapp with its own Vue Router.
4. Use a microfrontend loader to inject the active module's app into the base SPA based on the current route.

Example base SPA guard logic:

// Base SPA router guard
router.beforeEach((to, from, next) => {
  const userRole = localStorage.getItem('role')
  if (to.path.startsWith('/admin') && userRole !== 'admin') {
    next('/403')
  } else {
    // Load the corresponding microapp
    loadMicroApp(to.path.split('/')[1])
    next()
  }
})

For your 100+ page, multi-module app with granular permissions, the microfrontend hybrid approach is the best choice:

• It solves the single SPA's bundle size problem by splitting modules into independent chunks.
• It keeps the seamless, reload-free experience users expect from a single SPA.
• It scales well for large teams and evolving module requirements.

If your team isn't ready for microfrontends yet, start with a single SPA + lazy loaded module routes. You can gradually refactor modules into microapps as the project grows.

内容的提问来源于stack exchange，提问作者angelique000