Html 实现静态页面分离,和互相调用VUE元素方法

主要依靠一个js文件 ,引入到content页面

$(function () {
    $.get("header.html",function (data) {
        $("#header").html(data);
    });
    $.get("footer.html",function (data) {
        $("#footer").html(data);
    });
});

为三个页面分别创建html文件

header.html   footer.html

在content页面,使用标签引入

<!--引入头部-->
<div id="header"></div>


<!--body其他内容-->

<!--引入footer部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>

 

互相调用ｖｕｅ元素

 例如:在content页面 vue 逻辑代码部分 使用 "非匿名"

var routeVue = new Vue({
　　内容体
})

从header.html  中调用

routeVue._data.pageBean.minPrice=0;
routeVue._data.pageBean.maxPrice=0;
routeVue.findRouteByCat()