vue的hash值原理也是table切换实例代码
程序员文章站
2022-03-22 15:37:58
我希望大家敲一遍</t...</div>
<div class="content">
<p>我希望大家敲一遍</p>
<div class="jb51code">
<pre class="brush:js;">
<!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">关于我的页面</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";
//重新设置当前显示的页面是哪个div
currentview = item.component;
}
})
}
</script>
</html></pre>
</div>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="vue的hash值原理也是table切换实例代码" src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTkxMjI4MTU2OC5wbmc=" title="vue的hash值原理也是table切换实例代码"><br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="vue的hash值原理也是table切换实例代码" src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTkxMjI4NzgzOS5wbmc=" title="vue的hash值原理也是table切换实例代码"><br><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="vue的hash值原理也是table切换实例代码" src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEyMTQvYl8wXzIwMjAxMjE0MTkxMjI4NjU4My5wbmc=" title="vue的hash值原理也是table切换实例代码"></p>
<p>到此这篇关于vue的hash值原理也是table切换的文章就介绍到这了,更多相关vue hash原理内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！</p> </div>
<div class="tags">
相关标签： <a href="/t/vue/" target="_blank">
vue </a>
<a href="/t/hash/" target="_blank">
hash </a>
<a href="/t/%E5%8E%9F%E7%90%86/" target="_blank">
原理 </a>
<a href="/t/table/" target="_blank">
table </a>
<a href="/t/%E5%88%87%E6%8D%A2/" target="_blank">
切换 </a>
</div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/286377.html">
asp.net core 修改默认端口的几种方法 </a>
</p>
<p>
下一篇： <a href="/article/286379.html">
mysql主从库同步部分表、跳过错误和部分错误代码 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/1518548.html" target="_blank" title="vue的hash值原理也是table切换实例代码">
<h2>
vue的hash值原理也是table切换实例代码 </h2>
</a>
</li>
<li>
<a href="/article/286378.html" target="_blank" title="vue的hash值原理也是table切换实例代码">
<h2>
vue的hash值原理也是table切换实例代码 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>