How to deal with the problem of keep-alive multi-level route cache in vue

This article introduces the relevant knowledge of "how to deal with the problem of keep-alive multi-level routing cache in vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Problem description

In the reconciliation center, when the last two convenient navigation menus are the same module and three or more menus, it can be cached normally when switching between two convenient tabs, but when the last tab is deleted, the other page is no longer cached at this time.

two。 Cause analysis

Keep-alive supports caching at two levels by default, and caching for pages at level 3 or above is invalidated. The previous method is to store the identity of the current route and the parent identity together after listening for a route change. When multiple pages exist, closing one of the pages will delete both the parent identity and the parent identity. At this time, there is no parent identity in the array, and the caching of other peer pages will become invalid.

3. Solution idea

Split all routes of the routing configuration table into two operations, one is to keep the original for menu display, and the other is to flatten the routing configuration table and treat all routes as secondary routes, so that keep-alive can support caching by default.

4. Treatment process

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 to complete routing configuration

Export const menuList = modules; / / for menu display const routerList = formatTwoStageRoutes (formatFlatteningRoutes (modules)); / / flattening routes to secondary routes const router = new VueRouter ({scrollBehavior: () = > ({y: 0}), mode: 'history', base: process.env.BASE_URL, routes: routerList, / / using flattened routes in routing configuration items})

Flattening method

Export const formatFlatteningRoutes = (routesList = > {if (routesList.length {if (v.path = ='/') {/ / is used to add trial layout and home page. Other central configurations filter out layout and parent node, leaving only list.push (v) for routing within children. 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 {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 need to be configured with layout (v)} else {routerList [0] .children.push ({... v})}) return routerList } the content of "how to deal with the problem of keep-alive multi-level route cache in vue" is introduced here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!