前端路由

1. 前言

回顾下 前端的基础路由
有助于理解 SPA 单页应用
单页应用 可以看
掘金 菜单切换都是单页
-IT技术菜单切换都是单页

可以在不跳转页面的情况下 修改浏览地址以及历史记录
这就是底层 vue react router原理

---

2. history 模式

history API 是H5提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求

1. history.pushState(参数1,参数2,参数3)

参数1: 一个对象或者字符串，用于描述新记录的一些特性。
这个参数会被一并添加到历史记录中，以供以后使用。这个参数是开发者根据自己的需要自由给出的。
参数2:一个字符串，代表新页面的标题。当前基本上所有浏览器都会忽略这个参数。
参数3:一个字符串 url，代表新页面的相对地址。

---

2. popstate 监听

1. 用户点击浏览器的前进和后退操作
2. 手动调用 history 的 back、forward 和 go 方法
3. 监听不到：history 的 pushState 和 replaceState方法

---

3. 基本使用

注意

1.页面不刷新

2. 历史记录有这个入栈记录

   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.单页面跳转

1. 相关代码

    

         前端
         iOS
    
    

        
CSS 的元素显示模式

        
Electron 网页调起客户端
        
Vue全局API总结
    
    

        
iOS上的插件优化设计
        
iOS隐私升级及注意事项
        
数据结构与算法-栈
    
    

---

2. 扩展

history API 提供了丰富的函数供开发者调用，我们可以把控制台打开，然后输入下面的语句来玩浏览器地址栏

history.replaceState({}, null, '/b') // 替换路由
history.pushState({}, null, '/a') // 路由压栈
history.back() // 返回
history.forward() // 前进
history.go(-2) // 后退2次

---

3. 总结

1. 优点：路径比较正规，没有井号 #
2. 缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了

---

5. hash/哈希模式

1. URL构成回顾

1. URL的6部分
   协议，域名或IP，端口号，路径，参数，哈希值
2. 一个页面的url前5部分发生变化时，页面会执行跳转;
3. 页面url的 哈希值发生变化时，页面不会跳转

---

2. 哈希路由

1. url的hash值，专门用于实现前端路由，不同的hash值对应不同的页面，当hash发生变化时，当前页面中显示的内容也会发生变化，而且这种变化是无跳转的
2. hash 模式是一种把前端路由的路径用井号#拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发hashchange事件。

---

6.onhashchange

1. 代码

    

        

            
            百度一下            
        
>
        

            abc
        
        

            qqq
        
    

    


    

---

2. 总结 hash 模式的优缺点：

优点：浏览器兼容性较好，连 IE8 都支持
缺点：路径在井号 # 的后面，比较丑

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切都是为了部落的崛起

共勉