vue的hash值原理也是table切换实例代码
我希望大家敲一遍
<!DOCTYPE html><html><head><meta charset='utf-8'><title></title><style>.pages>div{display: none;}</style></head><body><p><a href='https://www.haobala.com/bcjs/10507.html#/' rel='external nofollow' >aaa</a><a href='https://www.haobala.com/bcjs/10507.html#/about' rel='external nofollow' >bbb</a><a href='https://www.haobala.com/bcjs/10507.html#/user' rel='external nofollow' >cccc</a></p><div class='pages'><div id='home'>首页</div><div id='about'>关于我的页面</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')},]// 默认hashwindow.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';//重新设置当前显示的页面是哪个divcurrentView = item.component;}})}</script></html>
到此这篇关于vue的hash值原理也是table切换的文章就介绍到这了,更多相关vue hash原理内容请搜索好吧啦网以前的文章或继续浏览下面的相关文章希望大家以后多多支持好吧啦网！
相关文章：
网公网安备