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

Use pictures to realize personalized underline of hyperlinks

Don't be surprised if you see some kind of und...

Detailed explanation of the use of the clip-path property in CSS

Use of clip-path polygon The value is composed of...

Vue implements left and right sliding effect example code

Preface The effect problems used in personal actu...

Mysql join table and id auto-increment example analysis

How to write join If you use left join, is the ta...

Vue method to verify whether the username is available

This article example shares the specific code of ...

Example analysis of mysql shared lock and exclusive lock usage

This article uses examples to illustrate the usag...

Native JS to achieve directory scrolling effects

Here is a text scrolling effect implemented with ...

MySQL column to row conversion and year-month grouping example

As shown below: SELECT count(DISTINCT(a.rect_id))...

MySQL efficient query left join and group by (plus index)

mysql efficient query MySQL sacrifices group by t...

How to use nginx to block a specified interface (URL)

1. Introduction Sometimes, after the web platform...

Detailed process of using Vscode combined with docker for development

Preface Using Docker and VS Code can optimize the...

react-diagram serialization Json interpretation case analysis

The goal of this document is to explain the Json ...

The forgotten button tag

Note: This article has been translated by someone ...

Solution to the routing highlighting problem of Vue components

Preface Before, I used cache to highlight the rou...