Keep-alive multi-level routing cache problem in Vue

Keep-alive multi-level routing cache problem in Vue

1. Problem Description

In the reconciliation center, when the last two convenient navigation menus are the same module and are level three or above menus, they can be cached normally when switching between the two convenient tabs. However, when the last tab is deleted, the other tab page is no longer cached.

2. Cause Analysis

By default, keep-alive supports two levels of caching, and the cache of pages at level three and above is invalid. The previous processing method is: after monitoring the route change, the current route identifier and the parent identifier are stored together. When multiple pages exist, closing one of the pages will also delete the identifier of itself and the parent. At this time, there is no parent identifier in the array, and the cache of other pages at the same level will be invalid.

3. Solution

Split all routes in the routing configuration table into two operations. One is to keep them as they are for menu display, and the other is to flatten the routing configuration table and process all routes into secondary routes, so that keep-alive can support caching by default.

4. Processing

Get the complete routing configuration

const modules = []
files.keys().forEach(key => {
    const filesObj = files(key).default || files(key)
    Object.keys(filesObj).forEach(keyOne => {
        modules.push(filesObj[keyOne])
    })
})

Operation completes routing configuration

export const menuList = modules; // For menu display​
const routerList = formatTwoStageRoutes(formatFlatteningRoutes(modules)); // Flatten the routes into two-stage routes​
const router = new VueRouter({
    scrollBehavior: () => ({ y: 0 }),
    mode: 'history',
    base: process.env.BASE_URL,
    routes: routerList, //Use the flattened routes in the routing configuration items})

Flattening method

export const formatFlatteningRoutes = (routesList => {
  if (routesList.length <= 0) return routesList;
  let list = [];
  routesList.forEach(v => {
    if(v.path === '/') {
      // Used to add the initial layout and home page. Other center configurations filter out the layout and parent nodes, and only keep the routes in children list.push(v);
      list = list.concat(formatFlatteningRoutes(v.children))
    } else if (v.children && v.children.length > 0) {
      list = list.concat(formatFlatteningRoutes(v.children))
    } else {
      list.push(v);
    }
  })
  return list;
})
​
export const formatTwoStageRoutes = list => {
  if (list.length <= 0) return list;
  const routerList = [];
  list.forEach(v => {
    if (v.path === '/') {
      routerList.push({
        component: v.component,
        name: v.name,
        path: v.path,
        redirect: v.redirect,
        meta: v.meta,
        children: []
      })
    } else if (v.path === '/login' || v.path === '/showcasePage') {
      // Pages that do not require layout configuration routerList.push(v)
    } else {
      routerList[0].children.push({ ...v })
    }
  })
  return routerList;
}

This is the end of this article about the keep-alive multi-level routing cache problem in Vue. For more relevant Vue keep-alive multi-level routing cache content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • The keep-alive component in Vue implements caching of multi-level nested routes
  • Detailed explanation of Vue's routing guard and keep-alive life cycle
  • Detailed explanation of keep-alive in Vue
  • Detailed explanation of vue3 cache page keep-alive and unified routing processing
  • How to clear the cache after using keep-alive in vue
  • Analysis of the implementation principle of Vue keep-alive

<<:  Example code for implementing simple ListViews effect in html

>>:  MySQL multi-instance configuration application scenario

Recommend

JavaScript implements Tab bar switching effects

Here is a case that front-end developers must kno...

An article to help you thoroughly understand position calculation in js

Table of contents introduction scroll Element.scr...

Example code for using text-align and margin: 0 auto to center in CSS

Use text-align, margin: 0 auto to center in CSS W...

SQL left join and right join principle and example analysis

There are two tables, and the records in table A ...

Using radial gradient in CSS to achieve card effect

A few days ago, a colleague received a points mal...

Three properties of javascript objects

Table of contents 1. writable: writable 2. enumer...

mysql5.7.19 zip detailed installation process and configuration

MySQL v5.7.19 official version (32/64 bit install...

CocosCreator general framework design resource management

Table of contents Problems with resource manageme...

Analysis of MySQL lock wait and deadlock problems

Table of contents Preface: 1. Understand lock wai...

How to display div on object without being blocked by object animation

Today I made a menu button. When you move the mous...

How to expand Linux swap memory

Swap memory mainly means that when the physical m...

Analysis of two usages of the a tag in HTML post request

Two examples of the use of the a tag in HTML post...