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()