大家好，又见面了，我是你们的朋友全栈君。
通常的url 地址由什么构成呢：协议名 域名 端口号 路径 参数 哈希值
比如：http://www.itcast.cn:80/home/index?name=zs#absdklfajdf
当哈希值改变（哈希值就是：#absdklfajdf），页面不会发生跳转，单页面应用就是利用了这一点：
单页面应用因为只有一个页面，所以页面不能发生跳转，但是，我们又需要根据url地址来展示不同的组件
这个时候，只能用哈希值来表示究竟要展示哪个组件了
单页面应用就是根据hash值来改的
给window注册onhashchange事件，当哈希值改变时通过location.hash就能获得相应的哈希值，然后就能跳到相应的页面：
<body>
<div id="app">
<component :is="currentPage"></component>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 设计用户访问的规则
// #/login 访问登录页 要给用户展示login组件
// #/register 访问注册页 要给用户展示register组件
// #/list 列表页 要给用户展示list组件
Vue.component("login", {
template: `<div>
<h1>这是登录页</h1>
<input type="text"><input type="text"><button>登录</button>
</div>`
});
Vue.component("register", {
template: `<div>
<h1>这是注册页</h1>
<input type="text"><input type="text"><input type="text"><button>注册</button>
</div>`
});
Vue.component("list", {
template: `<div>
<h1>这是列表页</h1>
<input type="text"><input type="text"><button>登录</button>
</div>`
});
const vm = new Vue({
el: "#app",
data: {
currentPage: "login"
},
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;
}
}
}
});
</script>
</body>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/148496.html原文链接：https://javaforall.net
