Vue:路由原理(hash)


直接上代码

在页面上写点东西

<p><a href="#/home">首页</a>|<a href="#/about">关于</a>|<a href="#/info">信息</a></p>
<div id="home">
<h1>首页</h1>
</div>
<div id="about">
<h1>关于</h1>
</div>
<div id="info">
<h1>信息</h1>
</div>

默认显示第一个,也就是首页

<style>
#about {
display: none;
}
#info {
display: none;
}
</style>

看一下页面效果
现在需要实现需求,点击关于页面显示关于,同时URL也显示对应的a标签href的内容

Vue:路由原理(hash)

通过hashchange改变事件来实现这个需求
hash就是页面上显示URL
一大堆if判断就是让对应的文字显示
没有用document.getElementById是因为,当元素为页面唯一元素的时候可以直接用

  window.onhashchange = function (e) {
let hash = window.location.hash;
console.log(hash) // 打印出来hash看一下
if (hash == '#/home') {
home.style.display = 'block';
about.style.display = 'none';
info.style.display = 'none';
} else if (hash == '#/about') {
home.style.display = 'none';
about.style.display = 'block';
info.style.display = 'none';
} else if (hash == '#/info') {
home.style.display = 'none';
about.style.display = 'none';
info.style.display = 'block';
}
}

看一下打印出来的hash

Vue:路由原理(hash)

看一下页面效果

Vue:路由原理(hash)

Vue路由跳转(正戏)

是不是感觉很熟悉?
这就是vue的路由配置方式
path是地址栏显示的URL
component是需要显示对用的页面,在这里就是那几个div

const router = [
{path:'#/home',component:home},
{path:'#/about',component:about},
{path:'#/info',component:info}
]

对应的js代码

let currentView = router[0]; // 默认显示第一个页面

window.onhashchange = function(e) {
for(let i = 0; i < router.length; i++) {
if(location.hash == router[i].path) { // 如果URL匹配到
currentView.component.style.display = 'none'; // 关闭默认显示的页面
router[i].component.style.display = 'block'; // 显示匹配到的页面
currentView = router[i]; // 更改默认显示的页面为当前页面
break; //匹配到之后跳出循环,提高性能
}
}
}

看一下效果是否一样

Vue:路由原理(hash)

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

Vue:路由原理(hash)

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Vue:路由原理(hash)
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏