收藏
天蓬老师批改状态：合格
老师批语：
Location 接口表示其链接到的对象的位置（URL）。
属性：
Location.href
Location.protocol
Location.host
Location.hostname
Location.port包含端口号的一个DOMString。
Location.pathname
包含URL中路径部分的一个DOMString，开头有一个“/“。Location.search
包含URL参数的一个DOMString，开头有一个“?”。Location.hash
包含块标识符的DOMString，开头有一个“#”。
Location.username
Location.password
Location.origin 只读
下面是一个基于锚点的哈希路由模式案例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基于锚点的哈希路由模式</title></head><body><div class="wrap"><nav><a href="#list1">国际新闻</a><a href="#list2">娱乐新闻</a></nav><!-- 该区域专用于显示路由的内容 --><div class="route-view"></div><script>let list1 = `<ul id="list1"><li><a href="">美国：是“我有一个梦想”还是“我已不能呼吸”</a></li><li><a href="">美国：是“我有一个梦想”还是“我已不能呼吸”</a></li><li><a href="">美国：是“我有一个梦想”还是“我已不能呼吸”</a></li></ul>`;let list2 = `<ul id="list2" style="transform: translate(0, 10rem);transition: all 0.5s;"><li><a href="">19日晚，郑爽再度发文回应代孕弃养，并爆料张恒曾出轨。</a></li><li><a href="">19日晚，郑爽再度发文回应代孕弃养，并爆料张恒曾出轨。</a></li><li><a href="">19日晚，郑爽再度发文回应代孕弃养，并爆料张恒曾出轨。</a></li></ul>`;// //获取路由的内容显示区的元素const routeView = document.querySelector('.route-view');// // window.location 当前页面的URL// // 锚点使用 location.hash 包含块标识符的DOMString，开头有一个“#”。// console.log(location.hash);// hashchange：url中的锚点变化时会自动触发此事件window.addEventListener("hashchange", show);// DOMContentLoaded：当初始的HTML文档被完全加载和解析之后，DOMContentLoaded事件被触发，而无需等待// 样式表、图像和子框架的完全加载，// window.addEventListener("load", show)console.log(location.pathname);// load和DOMContentLoaded的区别，简而言之就是只要DOM树创建完成就会触发，而load要等js和图片资源加载完成才触发//页面加载完成之后自动加载默认锚点window.addEventListener("DOMContentLoaded", show);function show () {console.log(location.hash);switch (location.hash) {case "#list1":routeView.innerHTML = list1;break;case "#list2":routeView.innerHTML = list2;break;default:routeView.innerHTML = list1;}}</script></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
