为了避免多页面情形下的代码重复,可以利用 load() 方法,将重复的部分(例如导航栏)放入单独的文件,使用下列方法进行导入:
1、simple.html为导入的文件;
2、避免同源策源,请在服务器端打开;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="include" file="./simple.html"></div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(".include").each(function() {
if (!!$(this).attr("file")) {
$(this).load($(this).attr("file"))
}
});
</script>
</body>
</html>