Route Caching

Principle

Route caching is implemented through the keep-alive component of vue-router. The keep-alive component caches the state of the component. When the component is visited again, it will directly take the component from the cache, instead of creating a new component. Since the keep-alive component uses the name attribute of the component as the key for caching, the page components in the project have been automatically injected with the name attribute through the @elegant-router/vue plugin, so you only need to set the keepAlive field of the meta attribute in the route data. The multi-level route caching of vue-router has problems, so the route data in the project has been converted into two-level routes to ensure that each route can be cached normally.

DANGER

Since the <Transition> tag is used to support page transition animations, there can only be one root element in the template of the .vue file of a page with caching turned on, and neither annotations nor plain text can be used, there must be only one root element. Related Documents： Transition | Vue.js (vuejs.org)

Usage

By setting the keepAlive field in the meta attribute of the route data, you can control whether the route is cached.

{
  name: 'about',
  path: '/about',
  component: 'layout.base$view.about',
  meta: {
    title: 'about',
    keepAlive: true
  }
}