vue 计算文件hash值_vue的hash值原理,也是table切换。

我希望大家敲一遍

.pages>div{display: none;}

aaa

bbb

cccc

首页
关于我的页面
用户中心

//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.οnhashchange=()=>{

//通过判断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;

}

})

}

55a34133833e363928a769ce195ca70e.png

45ab828aa1b4ad93109a98d1b6217dcf.png

49759ef5703919b1ea9a43f3554bffd9.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值