项目总结-前端路由hash和history

最新推荐文章于 2024-07-12 16:55:56 发布

知道了啊

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量434

点赞数 5

文章标签：前端哈希算法算法

本文链接：https://blog.csdn.net/m0_73280507/article/details/139895809

版权

项目总结-前端路由hash和history

router模块

路由需要实现的功能

当浏览器地址发生变化的时候，切换页面
点击浏览器后退前进的时候，网页内容发生变化
刷新浏览器，网页加载当前路由对应内容

路由主要是通过监听事件，并利用js实现动态改变网页内容，有两种实现方式

hash模式：监听浏览器地址hash地址的变化，执行相应的js切换网页
history模式：利用history API实现url地址改变，网页内容改变。

history和hash模式

history

window.history属性指向history对象，表示当前窗口的浏览历史，当发生改变的时候，会改变页面的路径，不会刷新页面，history对象保存了当前窗口访问过的所有页面网址

通过pushState, replaceState来实现无感刷新跳转的功能。

和hash的区别

https://github.com/xxx
https://github.com/xxx/yyy
https://github.com/xxx/yyy/zzz

正常的页面应该是全部发生刷新，但是使用history模式，只有第一个会发生刷新，后面只会发生前端跳转，不会刷新页面。

存在的问题

对于history来说，解决了不少hash存在的问题，但是也带来的新的问题

使用history模式的时候，对当前的页面进行刷新的时候，此时浏览器会重新发起请求，如果nignx没有匹配得到当前的url，就会出现404的页面
对于hash模式，虽然是改变了URL,但是不会被包括在http请求中，所以算是被用来知道浏览器的动作，不会影响服务端，改变hash不会改变真正的url，所以页面路径还是之前的路径，nginx也不会被拦截
因此，在使用history模式的时候，需要通过服务器来允许地址访问，如果没有出现这个设置，就容易出现导致404的出现。

hash

hash是URL中hash(#)及后面的那部分，也称散列值，常用作锚点来在页面中进行导航，改变URL中的hash部分不会引起页面刷新，不会随着请求发送到服务器。
所有的页面的跳转都是在客户端进行操作的，改变hash值不算是一个http请求，当前模式不适合seo优化。hash只能修改#后面的部分，所以只能跳转到当前url同文档的url。
通过hashchange事件监听URL的变化，可以通过location.hash来获取和设置hash值，通过浏览器的前进和后退触发网页跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <ul>
            <!-- 定义路由 -->
            <li><a href="#/home">home</a></li>
            <li><a href="#/about">about</a></li>
    
            <!-- 渲染路由对应的 UI -->
            <div id="routeView"></div>
        </ul>
    </ul>
</body>
<script>
    let routerView = document.getElementById('routeView')
    window.addEventListener('hashchange', () => {
        routerView.innerHTML = location.hash
    })
    window.addEventListener('DOMContentLoaded', () => {
        if(!localtion.hash) {
            location.hash = "/"
        } else {
            let hash = location.hash
            routerView.innerHTML = hash
        }
    })
</script>
</html>