How does Garfish's routing management system work, and how is route coordination between main and sub-applications achieved?

Garfish's routing management system is one of the core components of the micro-frontend architecture, responsible for coordinating routing relationships between the main application and sub-applications.

Core Routing Management Features

1. Route Registration

• Sub-application Route Configuration: Each sub-application needs to declare its own routing rules
• Route Prefix: Set independent route prefixes for sub-applications to avoid conflicts
• Route Mapping: Establish mapping relationships between URLs and sub-applications
• Example Configuration:

javascript
Garfish.run({
  apps: [
    {
      name: 'app1',
      entry: '//localhost:3001',
      activeWhen: '/app1',
      routes: [
        { path: '/', component: Home },
        { path: '/about', component: About }
      ]
    }
  ]
});

2. Route Listening and Dispatching

• Listen to URL Changes: Automatically listen to browser route changes
• Route Matching: Match corresponding sub-applications based on URLs
• Route Dispatching: Pass route information to corresponding sub-applications
• Support Multiple Route Modes: History API, Hash mode

3. Route Synchronization

• Main-Sub Application Sync: Maintain consistent route state between main and sub-applications
• Cross-Application Navigation: Support navigation from sub-applications to other sub-applications
• Route Parameter Passing: Pass route parameters during application switching
• Breadcrumb Navigation: Support cross-application breadcrumb navigation

4. Route Guards

• Global Before Guards: Execute logic before route switching
• Application-Level Guards: Route guards specific to certain sub-applications
• Permission Control: Permission-based route validation
• Example:

javascript
Garfish.router.beforeEach((to, from) => {
  if (to.path === '/admin' && !hasPermission()) {
    return '/login';
  }
});

Route Isolation Strategies

1. Route Prefix Isolation

• Each sub-application has its own independent route prefix
• Avoid route conflicts
• Facilitate route management and maintenance

2. Route Scoping

• Sub-applications can only access their own route space
• Prevent route interference between sub-applications
• Ensure route independence and security

3. Route Fallback

• Provide fallback routes when sub-application loading fails
• Display error pages or redirect to safe pages
• Improve user experience

Best Practices

• Unified Route Standards: Establish unified route naming and structure standards
• Route Lazy Loading: Combine with route lazy loading for performance optimization
• Route Caching: Reasonably use route caching to reduce repeated loading
• Error Handling: Improve route error handling mechanisms
• SEO Optimization: Ensure route configuration supports SEO

Through effective route management, seamless switching and collaboration between sub-applications can be achieved.