首页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#app-container {
display: flex;
min-width: 100%;
min-height: 100%;
}
#sidebar {
width: 10%;
background-color: #E6FAF0;
}
#main {
width: 90%;
}
#content{
border: 1px solid #C80000;
}
</style>
</head>
<body>
<div id="app-container">
<div id="sidebar">
<aside>
Aside
<ul>
<li><a href="javascript:void(0)">用户管理</a></li>
<li><a href="javascript:void(0)">字典管理</a></li>
</ul>
</aside>
</div>
<div id="main">
<header>Header</header>
<article>
<section>
<div id="content">
<h1>用户管理</h1>
</div>
</section>
</article>
<footer>Footer</footer>
</div>
</div>
</body>
</html>
字典管理代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>字典管理</h1>
</body>
</html>
用户管理同上
推荐用 vue 或者 react 脚手架来开发吧,两个框架都完善了路由这块功能。
楼主这个场景,可以直接用 ajax 请求整个 html ,如: