基于cdn方式的vue+element-ui的单页面架构
一、下载vue2.x，下载element-ui.js以及css
二、html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/element-ui.css"/>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{
margin:0;
padding:0;
}
.el-container{
max-width:1200px;
margin:0 auto;
}
.el-menu-item{
width:25%;
text-align:center;
font-size:1.075rem;
}
</style>
</head>
<body>
<div >
<el-container>
<el-header>
<el-menu :default-active="common.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="0">section1</el-menu-item>
<el-menu-item index="1">section2</el-menu-item>
<el-menu-item index="2">section3</el-menu-item>
<el-menu-item index="3">section4</el-menu-item>
</el-menu>
</el-header>
<el-main>
<section v-show="common.activeIndex=='0'">main1</section>
<section v-show="common.activeIndex=='1'">main2</section>
<section v-show="common.activeIndex=='2'">main3</section>
<section v-show="common.activeIndex=='3'">main4</section>
</el-main>
</el-container>
</div>
<script type="text/javascript">
;(function(){
new Vue({
el:"#app",
data(){
return {
common:{
activeIndex:"0",
},
main1:{
},
main2:{
},
main3:{
},
main4:{
},
}
},
methods:{
handleSelect(key, keyPath) {
const hash = ["section1","section2","section3","section4"];
window.location.hash = hash[parseInt(key)];
this.common.activeIndex = key;
}
},
created() {
let hash = window.location.hash;
const hashArr = ["#section1","#section2","#section3","#section4"];
let hashIndex = hashArr.indexOf(hash);
this.common.activeIndex = (hashIndex==-1?0:hashIndex).toString();
},
mounted() {
}
})
})();
</script>
</body>
</html>