vue三级以上菜单keep-alive无效解决办法

原因是:多级菜单,多个共用组件导致的keepAlive缓存失效,

三级以上的菜单结构中:

+------------------------------+
| Layout                       |
|  +------------------------+  |
|  | Common                  |  |
|  |  +------------------+  |  |
|  |  | Page             |  |  |
|  |  +------------------+  |  |
|  +------------------------+  |
+------------------------------+

如下路由配置:

vue三级以上菜单keep-alive无效解决办法_第1张图片

 

每个子组件与父组件都会公用Layout、Common,所以解决办法将每个子组件都会存在加载缓存它的父组件,将Layout的name设置为唯一值、common也是如此

vue三级以上菜单keep-alive无效解决办法_第2张图片

 

 

你可能感兴趣的:(vue,vue.js,前端框架,前端)