基于hashchange导航管理

时间 2019-11-13

标签基于 hashchange 导航管理繁體版

原文原文链接


想在五一放假的时候写出来，因为放假有点兴奋，心早就跑了，不废话了。
说一下基于hashchange导航管理：
浏览器的历史记录导航是用户很是经常使用的功能，除了点击前进后退按钮外，Window上的history对象还能够实现浏览器的导航.
例如： window.history.back();//后退
      window.forward();//前进
      window.history.go(-1);//后退一步
      window.history.go(1)//前进一步
这些方法都会有一个共同的特色是都会致使浏览器从新加载刷新，频繁的页面加载会消耗大量的时间，对用户的体验极差。
还好，url中有个特殊的部分是hash片断，在同一个网页当中不一样的得hash切换不会从新刷新加载页面，可是会在history留下历史记入。在hash片断发生变化时会触发hashchange事件，来进行切换。就这么多了 看一下demo：

贴上代码：html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<meta name="description" content="描述"/>
<meta name="keywords" content="关键字"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<style>
a{color:black;}
</style>
<body>
　　<a href="#article/0">首页</a>
　　<a href="#article/1">文章vue.js-1</a>
　　<a href="#article/2">文章vue.js-2</a>
　　<div id="page">
　　　　组件(Component) 是 Vue.js 最强大的功能之一。组件能够扩展 HTML 元素,
　　　　封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。..
　　</div>
<script>
var wrap=document.getElementById('page');
window.addEventListener('hashchange',function(e){
　　handelRoute(e);
});
function handelRoute(e){
if(e.newURL.indexOf("article/1") > 0){
wrap.innerHTML="<p>Vue.js（读音 /vjuː/, 相似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。它不只易于上手，还便于与第三方库或既有项目整合 </p>";
}else if(e.newURL.indexOf("article/2") > 0){
wrap.innerHTML="<p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。所以它很是容易学习，很是容易与其它库或已有项目整合。另外一方面，在与相关工具和支持库一块儿使用时，Vue.js 也能完美地驱动复杂的单页应用。</p>";
}else if(e.newURL.indexOf("article/0") > 0){
wrap.innerHTML="<p> 组件(Component) 是 Vue.js 最强大的功能之一。组件能够扩展 HTML 元素,封装可重用的代码。在较高层面上, 组件是自定义元素,Vue.js 的编译器为它添加特殊功能。..</p>";
}
}
</script>
</body>
</html>vue

能够看一下该事件的对象: 重要事情说一遍：web