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