demand

The front end routing is automatically generated based on the menu Settings returned by the back end, and the theory is that there is no level of nesting.

For example, generate a menu and route like this:

Home - url:'/'Administrator Area User Management User list - URL:'/users'Add user - URL:'/users/create'
Copy the code

The administrator area and user administration are used only for transitions. In my project, this transition is routed with path: ‘/’ + randomChars(), the component uses
, and jumps to the first child component.

The user list has too much data, so I want to cache it and use

.

The problem

The code is at jsfiddle.net/g7L2px8y/

When switching back and forth between the user list and adding a user, the user list can be cached without an alert popping up.

But when you go to the home page and click on the user list, you get alert. After switching to the home page, the ParentView of Users is destroyed, so it is impossible for Users to cache.

The first thought is to cache ParentView as well (include variables in codepen), but this has a more serious problem. Try the following sequence: Home page – User list – Add User – Home page – User list. I don’t know why, I’m just a PHP guy,

The e problem with caching the transition component is that when you switch to another branch, all the children of the transition component will be cached.

To solve

In an Element Admin issue, someone suggested a way to cache the transition components without caching them, where the routes are all on the same level and no longer nested. There is no way to use this.$route.matches to do anything.

Saw the keep alive – source, in simple terms, is to through the vnode include matching components, to keep alive – components in a cache object, render time next time, if you can find in here, Render the vNode directly (return in the render function).

So I thought about modifying the keep-Alive component and putting the cache object in the global (global variable or vuex) so that I could cache the child component without caching ParnetView.

The code is at jsfiddle.net/axgyzkjn/3/