vue项目 多级目录 菜单重复问题 解决_vue根据路由显示侧边栏菜单重复

在vue项目中，使用菜单树构建项目时，有时会出现三级目录下，界面出现了重复界面的现实，造成了页面污染，效果类似下图
首先要分析出现这个问题的原因是什么，代码实现中，如果当前路由是目录并且component 为 null时，会设置当前路由的组件 component 为layout 也就是公共布局组件实现，如果当前路由是具体页面并且component 不为 null时，则设置当前路由的 component 为具体页面的 component；

所以问题根源很明显了，一级路由，二级路由都是目录，所以三级菜单页面的路由组成部分中，有两个layout，所以会造成页面重复

如何解决？

查找之前项目的有三级路由的页面，查看调试。苦思良久，猛然发现router-link和 router-view的搭配使用。再联想到整个vue项目的路由配置，只要是目录而不是界面，都会把当前目录路由的组件设为layout，这么做是为了使树菜单和框架能适用于任何界面，但一个界面有超过两级的目录时候，这个页面就会有超过两个的layout，所以会出现页面重复，这个思路是没问题的。那么这个框架是如何解决在这个问题的呢？翻了一下代码，发现使用了router-view。router-view的使用意义是，当匹配到指定路由的时候，就在当前页面显示路由匹配的界面，而不是在一个新页面中展现匹配的页面。所以三级菜单显示时，其实是在二级目录路由匹配的界面中显示的，所以只会有一个layout。

总结，使用公共组件（比如layout）来构建项目时，如有多级路由页面嵌套（超过两级），必须给二级和超过二级的目录的路由组件，匹配vue界面。同时要在vue界面中使用标签来引导路由匹配到指定的页面展示，确保不出现页面污染问题

如果帮到你了，就点个赞或者评论一下吧，多谢多谢