<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<component :is="currentPage"></component>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="../js/jquery-1.10.2.min.js" ></script>
<script>
Vue.component("login", {
template: `<div id="a">123</div>`
});
Vue.component("register", {
template: `<div id="b">456</div>`
});
Vue.component("list", {
template: `<div id="c">789</div>`
});
const vm = new Vue({
el: "#app",
data: {
currentPage: "register"
},
created() {
window.onhashchange = () => {
this.goPage()
};
},
methods: {
goPage() {
switch(location.hash) {
case "#/login":
this.currentPage = "login";
break;
case "#/register":
this.currentPage = "register";
break;
case "#/list":
this.currentPage = "list";
break;
}
}
}
});
$("#a").click(function(){
alert("11");
});
$("#b").click(function(){
alert("22");
});
$("#c").click(function(){
alert("33");
});
</script>