demand

As shown in figure 2, the pages of “Risk Control Report” and “Risk Control Rule Query” need to be cached and reloaded after each deletion (See Figure 2). The “risk Control Management” is a blank. Vue file (all nested routines are just a blank file by their parent – placeholder for its subview to render) with the following code

<template>
    <router-view />
</template>
<script>
export default {
  name: 'Blank'
}
</script>
Copy the code

To solve

I read a lot of documents, all of which are to flush the nested multi-level route (keep-alive meets the level 2 / level 1 menu cache)

  1. To store all the tabs in vuex, see the store tagsView.js file in the vue-element-admin project
  2. In the appmin. vue file, add these two sentences as shown

3. Add this code to the global routing guard :(just for level 3 menu cache)

if (to.matched && to.matched.length > 2) {
   for (let i = 0; i < to.matched.length; i++) {
     const element = to.matched[i]
     if (element.components.default.name === 'Blank') {
       to.matched.splice(i, 1)
     }
   }
 }
Copy the code

The last

Related articles

Axios secondary encapsulation, unified storage of interfaces, RESTful style

Table Component Secondary Encapsulation based on elementUI (Vue Project)

Base component documents are repackaged based on ElementUi