不用iframe 不用vue 单页面的 后台管理系统也能优化到很好的体验

思路分享

嗯，现在 这种模板 就是有个难题。 还是上次 我说的刷新如何优雅的保持 左侧菜单的激活和展开状态。

解决方案就是：
1.vue
2.iframe
3.网上说的什么ajax pjax

抛开vue不说，

先讨论讨论iframe
但是实际上 iframe 这个有很多问题。比如iframe 有 seo问题(虽然后台根本不需要seo) iframe 和外部html 通信也麻烦。 iframe 的边框 高度问题， 跨域问题。 浪费流量问题(静态资源一刷新要加载两边) 里面一遍 外面一遍 我查看了国外很多知名 后台管理系统模板都没有用iframe，我亲身体验是 比如登录过期后，原本应该是跳转到登录页面，结果这个登录页面直接显示到了 那个iframe 里 （虽然解决了，但是老是折腾，很烦，打死不用iframe了）

就说一下这种单页面的html模板，分为前端解决，和后端解决

先说 后端解决： 假如左侧菜单就那么几个是固定的，数量不多的情况，可以每个页面通过给 li 加上open 类。即可

那如果后端左侧菜单是根据rbac权限动态分配的，那么就无法这样去加了，因为权限菜单的上下级是活动的。
所以需要通过前端来解决

前端解决：
方案一：
原理其实很简单，页面初始化的时候，js动态获取当前浏览器url 然后遍历左侧菜单的url 匹配上了就找到当前a链接的父级li 加上open 类

弊端：如果当前路由地址，不在左侧菜单中，那么则会失效，后端权限菜单被修改，也会失效。而且页面刚出现的时候，会有闪烁效果(体验极差)，假如有两个同样地址的菜单则会同时打开父级li

方案二：
点击下级菜单的a链接的时候，把这个dom直接存本地。然后刷新页面的时候最先执行遍历如果该dom存在则给li 添加 open

缺点：只是解决上面当前路由地址，不在左侧菜单中的情况。

最终解决方案：

给页面弄一个 遮罩层 ，

页面加载完成后，第一时间给 左侧菜单 遍历一次加给每个a连接上 加上一个 遍历 的 key 这样保证了。每个a链接的唯一性。这样解决了两个完全一模一样的a的问题。等待展开逻辑执行完毕，最后再 把遮罩层取消掉。

但是此时，会发现页面很生硬，那么 给整个页面弄一个 淡入动画。 用户体验提升3倍数

但是此时又发现你只是展开了，那我滚动条没有保持啊

简单 ！

监听 页面 unload事件。把左侧菜单 当前滚动条高度记录下。然后在 展开逻辑执行之后 再执行 滚动条 恢复 逻辑。最后页面dom都准备完毕后再显示整个页面。

额外优化：如果rbac菜单动态改变了怎么办？ 如果左侧菜单被改变，那么这个dom肯定发生改变了。
你可以给用户一个toast ： 您的权限菜单已被管理员重新分配 ！