绝对能看懂的Vue-Router之history模式

retun_true

于 2024-08-27 15:40:35 发布

阅读量216

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41092986/article/details/141596084

版权

接着第一篇的绝对能看懂的Vue-Router之hash模式，现在讲讲history模式，这是第二篇

这种模式在我们浏览网页时就比较普遍，也是大众见的最多的一种URL地址栏的模式，vue-router官网是这么描述的

vue-router history模式的工作原理就是（下面这段话记着，可能面试要考🤐）

总结：history 提供了 pushState 和 replaceState 两个方法来记录路由状态修改URL，这两个方法只改变 URL 不会引起页面刷新。

分述一：在 history 模式下浏览器在刷新页面时，会按照路径发送真实的资源请求。如果 nginx 没有匹配得到当前的 url ，就会出现 404 的页面，所以需要服务端的支持

分述二：通过 onpopstate 事件监听history变化，在点击浏览器的前进或者后退功能时触发，在onpopstate 事件中根据状态信息加载对应的页面内容。

分述三（加分）：404问题解决

以下是实践部分

<body>
  <p>history API test</p>
  <button id="btn1">修改 url</button>

  <script>
      // 页面初次加载，获取 path
      document.addEventListener('DOMContentLoaded', () => {
          console.log('load', location.pathname)
      })

      // 打开一个新的路由
      // 【注意】用 pushState 方式，浏览器不会刷新页面
      document.getElementById('btn1').addEventListener('click', () => {
          const state = { name: 'page1' }
          console.log('切换路由到->', 'page1')
          history.pushState(state, '', '/page1')
          // history.pushState(state, '')
          // history.pushState(state, '', 'https://www.baidu.com')
      })

      // 监听浏览器前进、后退
      window.onpopstate = (event) => {
        console.log('onpopstate', event.state, location.pathname)
      }
  </script>
</body>

这里是对pushState进行了扩展！有兴趣的同学可以了解一下

MDN描述，第三个参数为可选，但传的话一定要同源，不然会报错。

pushState就和hash模式类似，但比hash模式更有优势

总结有2点

1：hash相同就不会创建历史条目，而pushState还是会创建

2：pushState第一个参数为state对象，它将比hash的方式更具扩展性，hash模式只能编码成一个短字符串