基於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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。