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:
|
<<: Example code for implementing simple ListViews effect in html
>>: MySQL multi-instance configuration application scenario
Don't be surprised if you see some kind of und...
Table of contents JSX environment construction In...
Use of clip-path polygon The value is composed of...
Preface The effect problems used in personal actu...
How to write join If you use left join, is the ta...
This article example shares the specific code of ...
This article uses examples to illustrate the usag...
Here is a text scrolling effect implemented with ...
As shown below: SELECT count(DISTINCT(a.rect_id))...
mysql efficient query MySQL sacrifices group by t...
1. Introduction Sometimes, after the web platform...
Preface Using Docker and VS Code can optimize the...
The goal of this document is to explain the Json ...
Note: This article has been translated by someone ...
Preface Before, I used cache to highlight the rou...