我希望大家敲一遍
<!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>
到此这篇关于vue的hash值原理也是table切换的文章就介绍到这了,更多相关vue hash原理内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟!
您可能感兴趣的文章:
- Vue-router中hash模式与history模式的区别详解
- 区分vue-router的hash和history模式
- 基于vue hash模式微信分享#号的解决
- vue-cli3中配置alias和打包加hash值操作
- 在Vue中实现随hash改变响应菜单高亮
- 一文了解vue-router之hash模式和history模式
- vue vue-Router默认hash模式修改为history需要做的修改详解
- Vue-router 中hash模式和history模式的区别
- 详解vue的hash跳转原理
本文由 华域联盟 原创撰写:华域联盟 » vue的hash值原理也是table切换实例代码
转载请保留出处和原文链接:https://www.cnhackhy.com/43809.htm