Route-Level Cache Control

In RuoYi framework, you can prevent specific routes from using cached components by modifying the route configuration in src/api/router/index.js. Add the noCache: true parameter to the route's meta object:

{
  path: '/storage',
  component: Layout,
  hidden: true,
  redirect: 'noredirect',
  children: [
    {
      path: '/order',
      component: () => import('@/views/storage/order'),
      name: 'Order',
      meta: { title: 'Inbound Plan', icon: 'user'}
    },
    {
      path: '/inventory',
      component: () => import('@/views/storage/inventory'),
      name: 'Inventory',
      meta: { title: 'Receiving Check', noCache: true, icon: 'user'}
    }
  ]
}

Setting noCache: true forces the component to re-render on each navigation, ensuring fresh data is loaded. By default, this property is false, allowing Vue's <keep-alive> to cache the component instance.

Common Cache-Related Issues

Problem: Stale Data When Opening Same Page with Different Parameters

When navigating to the same route with different query parameters, the page may display cached content from the previous visit.

Solution 1: Disable Cache in Menu Configuration

Configure the route's meta property to prevent caching:

/**
 * hidden: true           - Hides route from sidebar (401, login pages, etc.)
 * alwaysShow: true      - Shows root route regardless of children count
 * redirect: noRedirect  - Disables click navigation in breadcrumbs
 * name: 'router-name'   - Required for keep-alive to work properly
 * query: '{"id": 1}'    - Default route parameters
 * meta: {
 *   nocache: true        - Prevents keep-alive caching (default: false)
 *   title: 'title'       - Display name in sidebar and breadcrumbs
 *   icon: 'svg-name'     - Icon from src/assets/icons/svg
 *   breadcrumb: false    - Hides from breadcrumb navigation
 *   activemenu: '/path'  - Highlights specified sidebar item
 * }
 */

Solutino 2: Programmatically Clear Component Cache

If nocache: true doesn't resolve the issue, manually remove the cache entry before navigating. Add a navigation guard using beforeRouteLeave:

beforeRouteLeave(to, from, next) {
  if (to.name === 'TargetRouteName') {
    try {
      const componentCache = this.$vnode.parent.componentInstance.cache;
      let cacheKey = '';
      for (const key in componentCache) {
        if (key.includes('TargetRouteName')) {
          cacheKey = key;
        }
      }
      if (cacheKey) {
        delete componentCache[cacheKey];
      }
    } catch (err) {}
    this.$destroy();
  }
  next();
}

Considerations

Route configuration accuracy is essantial for cache control to function properly. In scenarios involving cross-component communication via event buses, additional handling may be necesary to prevent data conflicts between cached instances. Evaluate the specific use case and choose the appropriate caching strategy accordingly.