原生JS配置后台系统的导航路由

后台系统一般情况下不考虑SEO优化服务，仅作为数据填报及展示等，所以目前一般都使用前后端分离模式进行开发，像Vue、react等框架都可实现，但数据获取的过程不利于搜索引擎抓取数据，所以目前这种模式多用于后台服务，当然像vue等也有解决seo优化的方案。

 

原生JS项目的应用场景还是在ie的兼容及稳定性上，今天分享一套支持ie8的原生JS项目，写的非常简单，就只有个导航，其实是回想起曾经做过的java混合开发的模式，使用了iframe的嵌套。

注：之所以只能兼容ie8版本是因为引入了layui（比较懒用了layui的导航偷个懒），自己写导航的话还可以再向下兼容的。

 

谷歌演示图：



ie演示图：

 

原生JS也是一样可以做前后端分离的，关于跨域问题，前端可以使用nginx代理解决，也可以通过后端完全放开权限。

 

主要代码：

    <script type="text/javascript">
	    // 页面dom创建完成后执行此函数
		window.onload = function(){
			// 如果地址后没有#XXX就默认渲染首页
			if(location.hash == '' || location.hash == '#'){
				pageFun('index');
				return false;
			}
			pageFun(location.hash.slice(1));
		}
		// 监听地址栏地址发生变化
        window.onhashchange = function () {
			pageFun(location.hash.slice(1));
        };
		// 函数区域----------------------------------------------------------------------
		// 动态嵌入页面
		function pageFun(page){
			document.getElementById('LAY_APP').innerHTML = '<iframe src="' + './page/'+page+'/'+page+'.html' + '" height="100%" width="100%" frameborder="0"></iframe>';
		}
		
    </script>

原理就是获取浏览器当前地址，以#符号后匹配页面文件嵌入。

完整实例:

原生JS.zip