1. 前言
回顾下 前端的基础路由
有助于理解
SPA单页应用单页应用 可以看
可以在不跳转页面的情况下 修改浏览地址以及历史记录
这就是底层
vuereactrouter原理
2. pushState 概念
history.pushState(参数1,参数2,参数3)
参数1: 一个对象或者字符串，用于描述新记录的一些特性。
这个参数会被一并添加到历史记录中，以供以后使用。这个参数是开发者根据自己的需要自由给出的。
参数2:一个字符串，代表新页面的标题。当前基本上所有浏览器都会忽略这个参数。
参数3:一个字符串 url，代表新页面的相对地址。
3. 基本使用
注意
1.页面不刷新
- 历史记录有这个入栈记录
function pushStateFun(){ // 地址栏 地址改变.产生了历史记录,但是页面没有刷新!!! // 历史记录入栈 history.pushState({value:10,name:"登录页面"},"页面标题","login.html") // history.pushState({value:10},"页面标题","./register.html") } // 点击浏览器 前进后退的时候调用 window.addEventListener("popstate",function(e){ console.log(">>>.",arguments) console.log(">>>.history",history.state) })
4.单页面跳转
<body> <div class="nav"> <button id="html"> 前端</button> <button id="iOS"> iOS</button> </div> <div class="html" id="A"> <h3>CSS 的元素显示模式 </h3> <h3>Electron 网页调起客户端</h3> <h3>Vue全局API总结</h3> </div> <div class="iOS" id="B"> <h3>iOS上的插件优化设计</h3> <h3>iOS隐私升级及注意事项</h3> <h3>数据结构与算法-栈</h3> </div> <script> /** * vue路由 框架都有封装好的 */ html.onclick = function () { A.style.display = 'block'; B.style.display = 'none'; history.pushState({ name: "html" }, "HTML页面", "/html") } iOS.onclick = function () { A.style.display = 'none'; B.style.display = 'block'; history.pushState({ name: "iOS" }, "iOS页面", "/iOS") } window.addEventListener("popstate", function () { if (history.state.name == "html") { A.style.display = 'block'; B.style.display = 'none'; } else { A.style.display = 'none'; B.style.display = 'block'; } }) </script> </body>
5. URL 哈希
URL的6部分
协议，域名或IP，端口号，路径，参数，哈希值
一个页面的url前5部分发生变化时，页面会执行跳转
页面url得哈希值发生变化时，页面不会跳转
url的hash值，专门用于实现前端路由，不同的hash值对应不同的页面，当hash发生变化时，当前页面中显示的内容也会发生变化，而且这种变化是无跳转的
hash值用于前端页面控制，所以向服务器发送请求时url的hash是不会发送的
6.onhashchange
<body> <ul> <li> <!-- 页面中的a标签的href属性，可以写绝对url也可以写相对url， 如果是相对url则省略的部分相对于当前页面url地址。 --> <a href="http://www.baidu.com">百度一下</a> </li>> <li> <a href="#abc">abc</a> </li> <li> <a href="#qqq">qqq</a> </li> </ul> <div id="router-view"> </div> </body> <script> var routerView = document.getElementById("router-view"); //window.onhashchange事件，当前页面的url的hash值发生变化时触发。 window.onhashchange = function(){ if(location.hash=="#abc"){ routerView.innerHTML = "这是abc页面的内容"; }else{ routerView.innerHTML = "这是QQQ页面的内容"; } } window.onload = function(){ if(location.hash=="#abc"){ routerView.innerHTML = "这是abc页面的内容-1"; }else{ routerView.innerHTML = "这是QQQ页面的内容"; } } </script>
