这些鬼东西特别繁琐，所以我们喜欢找些现成、开源的所谓后台管理的前端框架，开箱即用。
方便是方便，而且做得还挺好，问题是，有学习成本，要按照它的规则行事。一些功能是怎么实现的，不清楚，除非研究它的源代码。
想改的话，更不容易。一切都靠猜、盲测，一则不好改，二则出了问题也不知道是哪里的毛病，反而欲速则不达。
所以我们之前基于一个空白的vue项目开发，把需要的路由、ajax封装等摞上去。现在是实现侧边栏菜单。点击左侧菜单项，对应页面展示在右侧。
下面是详细介绍，ui框架采用elementplus。
html代码其实简单，左侧菜单用
后者不用做啥设置，点击菜单项，结果自然就展示在右侧了。好神奇。
以下是一个包含侧边栏的页面示例。支持二级菜单。
三级或更多就不行了。
很自然地，打开包含侧边栏结构的页面，应该有一个菜单项默认被选中，同时加载对应的页面。
但是elementplus只提供了选中指定菜单功能，加载页面需要自己完成。
1）默认选中指定的菜单项
设置属性el-menu.default-active。
属性值是el-sub-menu.index或el-menu-item.index
elmentplus只能设置选中菜单项，加载相应页面需要自己动手。
import{useRouter}from"vue-router";constrouter=useRouter();constgotoDefaultPage=(menus)=>{if(menus&&menus.length>0){constpath=router.currentRoute.value.path;//如果当前路径是子菜单，则直接打开子菜单；否则打开第一个子菜单//页面中，使用了菜单项的route作为indexconstto=path.split("/").length>2path:menus[0].route;router.replace(to);}};onMounted(()=>{constmenus=getMenus();gotoDefaultPage(menus);});
好像刷新页面，选中啥的会丢失，页面一片空白？这个问题记得不是很清楚了，现在我没有这个问题。
可能是获取到当前路由，按照路由重新打开。代码见2。
constpath=router.currentRoute.value.path;//如果当前路径是子菜单，则直接打开子菜单；否则打开第一个子菜单//页面中，使用了菜单项的route作为indexconstto=path.split("/").length>2path:menus[0].route;router.replace(to);
每个菜单项前面有个小图标。图标应该在菜单项/路由表二合一的数据中定义。取值从elmentplus的icon中选取。
{path:"p3-1",name:"p3-1",component:()=>import("../views/module3/page1"),meta:{text:"页面A",icon:"Histogram",},},
import{createApp}from"vue";importAppfrom"./App.vue";。。。importElementPlusfrom"element-plus";import"element-plus/dist/index.css";import*asElIconsfrom"@element-plus/icons-vue";constapp=createApp(App);app.use(ElementPlus).mount("#app");for(constnameinElIcons){app.component(name,ElIcons[name]);}
在侧边栏结构页面中，如何打开一个新窗口呢？
其实，无论是在普通页面，还是这种侧边栏结构页面，点击一个链接或按钮，打开一个新窗口，代码都是一样的。
但是！里面用到了路由。
如果该路由没有注册，那么在本文所示的侧边栏结构页面中，打开新窗口会失败，页面仍然显示在右侧，没有新开窗口！
这一度让我很困惑，以为
按照本文所示的例子，侧边栏结构页面实际上有2个
一个是app.vue里设置了，然后侧边栏结构页面实际上是包含在外面这个
两个都没有命名，那么都叫“default”。可能系统采取了就近原则，在侧边栏结构页面中点击新窗口链接，永远都对应它本身这个
然而在定义路由项中，使用components，指定名称，不好使，一点用没有。后来我才发现，新开窗口的链接，或者说是路由，一定要注册，这样就能新开窗口了。
前面的例子，菜单级别只能去到二级。如果要实现无限级，需要使用递归。页面组件递归。
代码如下：
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。