对Vue Router 路由管理器的原理及用法的理解与思考（1）-CSDN博客

本文链接：https://blog.csdn.net/weixin_46367832/article/details/139017004

Vue router的实现原理的核心是：1.改变url页面不刷新，2.改变url时，可以监听到路由的变化并能够做出一些处理。

路由的两种模式

Hash模式：Hash是URL中hash（#）及后面的那部分（如https://example.com/#user)橙色部分就是hash。常用作描点在页面内进行导航，hash值的变化并不会导致浏览器向服务器发出请求，不发出请求，也就不会刷新页面。同理也不需要在服务器作任何特殊的处理（因此不利于SEO）【SEO：搜索引擎优化。目标是增加网站在搜索引擎结果页面（SERP）中的可见性，从而吸引更多的有机流量（即非付费流量）。】之后通过主动跳转或者监听hashchange事件监听URL的变化即可实现我们的目标。

HTML5模式（History)：提供了两个方法pushState()和replaceState()，这两个方法改变URL的path部分不会引起页面刷新。通过浏览器前进，后退改变URL时会触发popState事件，而通过pushState()和replaceState()改变URL不会触发popState事件。

pushState()：允许修改浏览器的历史记录堆栈，并更新 URL 而不引起页面刷新。（即新增一个窗口）

`pushState()` 的基本用法

pushState() 方法接受三个参数：

state object: 一个与新历史记录条目关联的JavaScript对象。这个对象可以通过 popstate 事件的 state 属性访问。
title: 新的历史记录条目的标题。在大多数浏览器中，这个参数被忽略，因为标题是由 document.title 属性控制的。
URL: 新的历史记录条目的 URL。这个 URL 必须与当前页面的域名相同。

示例

// 假设我们有一个单页面应用程序，我们想添加一个新的历史记录条目 // 并更新 URL 为 "/new-page"，同时不引起页面刷新

history.pushState({page: "newPage"}, "New Page Title", "new-page");

在这个例子中，我们创建了一个新的历史记录条目，其中包含一个状态对象 {page: "newPage"}。这个状态对象可以在 popstate 事件的回调函数中访问。

replaceState()：类似于 `pushState()`，它也允许你修改浏览器的历史记录堆栈，但它不是在历史堆栈中添加一个新的条目，而是替换当前条目。（即停留在当前窗口）

`replaceState()` 的基本用法

replaceState() 方法同样接受三个参数：

state object: 一个与当前历史记录条目关联的JavaScript对象。这个对象可以通过 popstate 事件的 state 属性访问。
title: 历史记录条目的标题。与 pushState() 一样，这个参数在大多数浏览器中被忽略，因为标题是由 document.title 属性控制的。
URL: 要导航到的 URL。与 pushState() 一样，这个 URL 必须与当前页面的域名相同。