vue单页面 

<!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>

　　

posted @ 2020-11-18 16:11  ▍凉城空巷°  阅读(93)  评论(0)    收藏  举报