根据点击左侧菜单，动态加载右侧一部分的内容采用哪种方法比较好？

Question

解决方法很多，但是不知道哪种方法比较好。
iframe，ajax，还是全部在页面上写死通过点击菜单隐藏或显示右侧内容div？
1.iframe嵌套的话，网上说iframe过时了，我个人觉得iframe嵌套可能会导致操作dom很麻烦。
2.ajax创建html字符串然后append进去的话，不考虑拼接字符串直接放一整串html字符串应该比较方便吧。
3.全部放在一个d页面里面用标签页的方式显示的话，所有内容都在一个页面感觉很混乱。
另外，想要点击左侧菜单动态切换右侧div内容之外，url地址也发生了变化，在当前url后面加/itab1/,/tab2/，/tab3/,上衣左侧的菜单栏的a标签都是加了链接的，这种情况应该用哪种方法比较合适呢？谢谢大家~

PS：感觉刷新了页面用ajax好像没有意义了，所以很纠结用什么方法

Answer 1

iframe 就算了，更难维护，还是 ajax 吧，如果要变更地址栏，试试 pjax

Answer 2

我现在做的项目就是一个后台管理页面，左侧菜单，右侧div
iframe已经是上个时代的事情了，现在非常不推荐
性价比比较高的是用vue全家桶或者react全家桶配合流行的ui库，比如蚂蚁的ant-design,饿了么的element-ui
你所说的url地址栏变化切换右侧div的内容，正是单页面前端路由变化加载相应组件的场景，可以说这是现在管理系统的趋势，单页面应用的最佳适用场景
因为各种原因，我的现在这个项目也只是webpack + Bootstrap + jQuery的技术选型，用webpack 打包html模版，js监听菜单点击事件，根据地址栏变化切换相应的页面模版，感觉还是比较坑的...

Answer 3

看到这个问题，虽然已经解决但是还是想要答一发。

我现在负责的一个项目就是公司的业务管理后台，项目成立了大概一年多吧，现在还在一直开发新的功能，而且准备把老后台的业务移交一部分到这边来，目前大概有一百多个页面（基本上一个页面一个功能）了吧，这是背景。

我在开发之余，也遇到了和题主一样的问题，怎么样更好的开发我这个项目，先说说我们用的方案，使用jquery，多页面应用，左右两栏布局，头尾通过<!--#include virtual="/inc/side.html"-->这种引入，说说这种方案我感觉的利弊，以及我对于我们的系统做的一些改进。

• 利:因为使用了jquery没使用其他的新的东西。所以基本上不存在做不出来的功能，和无法解决的神坑。因为是多页面应用，所以你可以重新在搞一套东西都无所谓，不会影响其他页面。

• 弊:重复无效的劳动力。跳转需要新打开页面，浪费资源。tab页的话，ajax有并发问题。

• 改进：缓存一部分内容存放localstroage。自己写一写针对ajax去抖啊，处理空值的方法，避免二次开发。

也有想过使用iframe，其实我不觉得使用iframe丢人。毕竟他可以让你的体验变的更好一些，你可以看看h.ui.admin这套东西，我之前也有过一些简单了解。

然后就是我们项目的近况，尝试使用vuejs提升开发速度，组件使用requirejs引入。但是这样也造成了一个问题，就是如果有底层的东西需要改，那么需要改两套，一套jquery一套vue的，比较心累。然后又因为换成的问题，引入了gulp专门的打版本号。

最后，说说才做完的一个后台，因为功能不是很多，所以使用了 vue + iview +　webpack，打包，给我的感觉就是每次build的时候，好慢。如果说把我之前的项目整体打包，我肯定接受不了。

Answer 4

网上会很多这种jqui框架