不用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 类

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