vue的hash值原理也是table切換實(shí)例代碼
我希望大家敲一遍
<!DOCTYPE html><html><head><meta charset='utf-8'><title></title><style>.pages>div{display: none;}</style></head><body><p><a href='http://www.intensediesel.com/bcjs/10507.html#/' rel='external nofollow' >aaa</a><a href='http://www.intensediesel.com/bcjs/10507.html#/about' rel='external nofollow' >bbb</a><a href='http://www.intensediesel.com/bcjs/10507.html#/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)hashwindow.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è)divcurrentView = item.component;}})}</script></html>
到此這篇關(guān)于vue的hash值原理也是table切換的文章就介紹到這了,更多相關(guān)vue hash原理內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. ASP.NET MVC限制同一個(gè)IP地址單位時(shí)間間隔內(nèi)的請(qǐng)求次數(shù)2. XMLDOM對(duì)象方法：對(duì)象屬性3. 使用IDEA編寫jsp時(shí)EL表達(dá)式不起作用的問(wèn)題及解決方法4. jsp實(shí)現(xiàn)textarea中的文字保存換行空格存到數(shù)據(jù)庫(kù)的方法5. ASP.NET Identity的基本用法6. 解決ajax的delete、put方法接收不到參數(shù)的問(wèn)題方法7. 原生Ajax之全面了解xhr的概念與使用8. python subprocess pipe 實(shí)時(shí)輸出日志的操作9. 淺談Python數(shù)學(xué)建模之整數(shù)規(guī)劃10. Python Django搭建網(wǎng)站流程圖解
網(wǎng)公網(wǎng)安備