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的内容
- 通过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路由跳转(正戏)
- 是不是感觉很熟悉?
- 这就是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; //匹配到之后跳出循环,提高性能
}
}
}
- 看一下效果是否一样
更多推荐
已为社区贡献7条内容
所有评论(0)