vue的keepalive缓存多级路由,vue多级路由keep alive问题
本文主要介绍如何解决基于保活的后台多级路由缓存问题。本文通过示例代码给你做了非常详细的介绍，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
用过vue-element-admin的同学一定很清楚，路线的配置直接关系到侧边栏导航菜单的显示，也正是得益于这种设计思路，几乎所有的后端框架都采用了这种方案，包括我写的中后端框架Fantastic-admin。
但是这个方案有一个明显的问题，就是为了实现多级侧边栏导航菜单，需要以多级嵌套的形式配置路线。一旦超过两级，达到三级或三级以上，就需要添加一个空的布局页面(Empty.vue)供component使用，只是为了生成层次菜单。此时就出现了一个问题，因为keep-alive是在布局上处理的，所以两层以上的路由会变得难以处理，没有相对完善的解决方案。
在思考和解决这个问题之前，我们先来看看页面的大致结构：
-
布局
-
空的
-
页面
-
-
-
首先，在布局上处理keep-alive。如果不缓存Empty，Empty下面的页面不会被缓存。如果缓存为空，则空的所有页面都将被缓存，并且不能按需清除。相信接触过的同学一定会感受到其中的大洞。
解决思路
实际上，有一个相对清晰简单的解决方案。既然缓存二级路由没问题，超出二级页面也没多大意义，为什么不直接把路由处理成二级，这样页面显示就是二级结构。
- -
Layout Layout.vue
- -
空白 - 页面
-
页面
-
- -
- -
这里需要注意的是，路由配置仍然是多级嵌套的形式，而且这个配置并不是最终注册的路由，只是提供了侧边栏的导航菜单，同时生成了一个动态注册路由的数据。如果不了解图例，可以看看下面两组数据。
//原始数据(用于侧栏导航菜单)
{
路径：“/用户”，
元：{
标题：“用户管理”
},
儿童：[
{
路径：“客户端”，
元：{
标题：“客户管理”
},
儿童：[
{
路径：“列表”，
元：{
标题：“客户列表”
}
},
{
路径：“详细信息”，
元：{
标题：“客户详细信息”
}
}
]
}
]
}
//处理过的数据(用于动态注册路由)
{
路径：“/用户”，
元：{
标题：“用户管理”
},
儿童：[
{
路径：“客户端/列表”，
元：{
标题：“客户列表”
}
},
{
路径：“客户端/详细信息”，
元：{
标题：“客户详细信息”
}
}
]
}
可以通过递归函数处理路由数据，但这还不够，因为仍然需要处理面包屑导航。
原来的面包屑导航可以通过$ route.matched得到每一级嵌套路由的信息，但是当路由被处理成两级时，就不能通过$ route.matched显示了，所以面包屑导航信息需要和路由数据一起处理。最终会大致这样处理：
{
路径：“/用户”，
元：{
标题：“用户管理”
},
儿童：[
{
路径：“客户端/列表”，
元：{
标题：“客户列表”，
面包屑：[
{路径：“/用户”，标题：“用户管理”}，
{路径：客户，标题：客户管理 }，
{路径：列表，标题：客户列表 }
]
}
},
{
路径：“客户端/详细信息”，
元：{
标题：“客户详细信息”，
面包屑：[
{路径：“/用户”，标题：“用户管理”}，
{路径：客户，标题：客户管理 }，
{路径：详细信息，标题：客户详细信息 }
]
}
}
]
}
这样就可以通过$ route.meta.breadcrumb获得任意路线的完整面包屑导航信息，最终效果如下：
从图中可以看出，这个方案还是有一定的局限性的，就是路由处理成第二级后，多级嵌套关系就不存在了，也就是不能空写代码，因为会被忽略，只保留最顶层和最底层的路由。
当然，考虑到实际情况，这个限制问题不大，因为在后台系统中，其本身的模块是相对独立的。即使侧边栏中的导航菜单是分层嵌套的，在右边的内容显示区，几乎所有的独立模块都是不嵌套显示的。
实例代码
本文主要讨论实现思路。相关代码可以在Fantastic-admin中查看，核心代码在这里。点击查看。
关于解决基于保活的后台多级路由缓存问题的文章到此结束。有关保活多级路由缓存的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。