vue的hash值原理也是table切換實例代碼
更新時間：2020年12月14日 16:07:00 作者：然陳
這篇文章主要介紹了vue的hash值原理也是table切換,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
我希望大家敲一遍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.pages>div{display: none;}
</style>
</head>
<body>
<p>
<a href="#/" rel="external nofollow" >aaa</a>
<a href="#/about" rel="external nofollow" >bbb</a>
<a href="#/user" rel="external nofollow" >cccc</a>
</p>
<div class="pages">
<div id="home">首頁</div>
<div id="about">關(guān)于我的頁面</div>
<div class="user">用戶中心</div>
</div>
</body>
<script type="text/javascript">
//hash 和頁面一一對應起來
//router 配置
var router = [
{path:"/",component:document.getElementById("home")},
{path:"/about",component:document.getElementById("about")},
{path:"/user",component:document.querySelector(".user")},
]
// 默認hash
window.location.hash = "#/";
// 默認頁面
var currentView = router[0].component;
currentView.style.display="block";
window.onhashchange=()=>{
//通過判斷hash切換div頁面
console.log(location.hash);
//獲取hash值,不要井號
var hash = location.hash.slice(1);
router.forEach(item=>{
if(item.path==hash){
//先隱藏之前顯示的頁面
currentView.style.display = "none";
// 顯示對應的組件
item.component.style.display = "block";
//重新設(shè)置當前顯示的頁面是哪個div
currentView = item.component;
}
})
}
</script>
</html>
到此這篇關(guān)于vue的hash值原理也是table切換的文章就介紹到這了,更多相關(guān)vue hash原理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue學習筆記之過濾器的基本使用方法,結(jié)合實例形式分析了vue.js過濾器的基本功能、用法與操作注意事項,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Vue scoped及deep使用方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
vue+element模態(tài)框中新增模態(tài)框和刪除功能
這篇文章主要介紹了vue+element模態(tài)框中新增模態(tài)框和刪除功能,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要介紹了vue項目中$t()的意思是什么，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
公共Hooks封裝useTableData表格數(shù)據(jù)實例
這篇文章主要為大家介紹了公共Hooks封裝useTableData表格數(shù)據(jù)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章我們將探討Vue3框架的優(yōu)秀特性、使用原理、周邊生態(tài)和實戰(zhàn)應用，系統(tǒng)的學習Vue生態(tài)體系，希望和大家共同成長，我們一起探討下Vue3和Vue2的響應式原理，那究竟什么是“響應式”，接下來跟著小編一起來學習吧2023-05-05
vxe-list?vue?如何實現(xiàn)下拉框的虛擬列表
這篇文章主要介紹了vxe-list?vue?如何實現(xiàn)下拉框的虛擬列表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vant 中的Toast設(shè)置全局的延遲時間操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細介紹了vue子路由跳轉(zhuǎn)實現(xiàn)tab選項卡，完成一個簡單的tab選項卡布局，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
利用Vue2.x開發(fā)實現(xiàn)JSON樹的方法
這篇文章主要給大家介紹了關(guān)于利用Vue2.x開發(fā)實現(xiàn)JSON樹的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01