各位掘金的弄潮儿，大家好！我是你们的老朋友，今天咱们来聊聊Vue 3源码里Vue Router的History模式，特别是pushState和popstate这两位关键先生。准备好了吗？咱们发车！
开场白：History模式的前世今生
想象一下，你正在浏览一个网站，每点击一个链接，地址栏都会变化，但页面却像变魔术一样，无刷新地切换内容。这就是History模式的魅力所在。它让你的Vue应用看起来更像一个原生应用，用户体验蹭蹭往上涨。
History模式的核心在于利用了浏览器的History API，特别是pushState和popstate这两个事件。简单来说，pushState负责“推”新的历史记录，popstate负责“弹”回历史记录。
第一幕：pushState——历史的创造者
pushState方法允许你在不刷新页面的情况下修改浏览器的URL，并且可以将新的URL记录到浏览器的历史堆栈中。它的语法如下：
window.history.pushState(state, title, url);state：一个与新历史记录项关联的JavaScript对象。当用户通过浏览器的前进/后退按钮导航到这个新的状态时，这个对象会作为popstate事件的state属性传递给你的应用。title：大多数浏览器会忽略这个参数，所以你可以安全地传递一个空字符串。url：新的URL。必须是与当前页面同源的URL。
让我们看一个简单的例子：
window.history.pushState({ page: 'about' }, '', '/about');这段代码会将浏览器的URL修改为/about，并且在历史堆栈中添加一个新的记录。同时，我们还传递了一个state对象{ page: 'about' }，这个对象将在后面的popstate事件中用到。
在Vue Router中，pushState被用来模拟页面跳转，而不会实际刷新页面。例如，当你在Vue Router中使用router.push('/about')时，实际上Vue Router会在内部调用pushState来更新URL。
第二幕：popstate——历史的回溯者
popstate事件在用户通过浏览器的前进/后退按钮导航到不同的历史记录项时触发。这个事件的event.state属性包含了与该历史记录项关联的state对象（就是我们在pushState中传递的那个）。
window.addEventListener('popstate', (event) => {
console.log('state:', event.state); // 例如，{ page: 'about' }
});在Vue Router中，popstate事件被用来监听浏览器的前进/后退操作，并且根据当前的URL来更新应用的视图。
第三幕：Vue Router中的History模式实现
现在，让我们深入Vue Router的源码，看看它是如何使用pushState和popstate来实现History模式的。
以下是一个简化的Vue Router的History模式实现：
class History {
constructor(router) {
this.router = router;
this.current = { path: '/' }; // 初始状态
this.ensureSlash(); // 确保URL以斜杠开头
}
ensureSlash() {
if (window.location.pathname[0] !== '/') {
window.history.replaceState(null, '', '/' + window.location.pathname);
}
}
push(path) {
this.transitionTo(path);
window.history.pushState({ path }, '', path);
}
replace(path) {
this.transitionTo(path);
window.history.replaceState({ path }, '', path);
}
transitionTo(path) {
this.current = { path };
this.router.matcher.match(path); // 匹配路由
this.router.app.$forceUpdate(); // 强制更新组件
}
listen(cb) {
window.addEventListener('popstate', () => {
this.transitionTo(window.location.pathname);
cb(window.location.pathname);
});
}
}
// 模拟 Vue Router 结构
class Router {
constructor(options) {
this.routes = options.routes;
this.matcher = new Matcher(this.routes);
this.history = new History(this);
}
push(path) {
this.history.push(path)
}
replace(path) {
this.history.replace(path)
}
init(app) {
this.app = app;
this.history.listen((route) => {
// 路由变化的回调
console.log(`Route changed to: ${route}`);
});
}
}
class Matcher {
constructor(routes) {
this.routes = routes;
}
match(path) {
// 模拟路由匹配
const route = this.routes.find(route => route.path === path);
if (route) {
console.log(`Matched route: ${route.path}`);
} else {
console.log(`No route matched for path: ${path}`);
}
}
}
// 在 Vue 组件中使用
const app = {
data() {
return {
currentRoute: window.location.pathname
}
},
mounted() {
this.$router.init(this);
},
template: `
<div>
<h1>Vue Router Example</h1>
<p>Current Route: {{ currentRoute }}</p>
<button @click="goTo('/home')">Go to Home</button>
<button @click="goTo('/about')">Go to About</button>
</div>
`,
methods: {
goTo(path) {
this.$router.push(path);
this.currentRoute = path; // 更新组件数据
}
}
}
// 初始化 Vue 实例 (简化)
const router = new Router({
routes: [
{ path: '/home', component: { template: '<div>Home Component</div>' } },
{ path: '/about', component: { template: '<div>About Component</div>' } }
]
});
// 模拟 Vue 实例挂载
router.app = app;
router.app.$router = router;
router.app.mounted(); // 模拟 mounted 钩子这个例子展示了History类的核心逻辑：
push(path)：调用transitionTo(path)来更新应用的视图，然后调用window.history.pushState({ path }, '', path)来更新URL。replace(path)：与push类似，但使用window.history.replaceState来替换当前的URL。listen(cb)：监听popstate事件，当用户点击浏览器的前进/后退按钮时，调用transitionTo(window.location.pathname)来更新应用的视图，并且执行回调函数。transitionTo(path)：负责根据给定的路径来更新应用的视图。在这个例子中，它只是简单地更新了this.current对象，然后调用this.router.app.$forceUpdate()来强制更新组件。
第四幕：History模式的注意事项
虽然History模式很酷，但在使用时需要注意以下几点：
- 服务器配置：由于History模式会修改URL，因此你需要配置你的服务器，以便在用户直接访问这些URL时，能够正确地返回你的应用。通常，你需要将所有未匹配到静态资源的请求重定向到你的应用的入口文件（例如
index.html）。 - SEO：如果你的应用需要良好的SEO，那么你可能需要考虑使用服务器端渲染（SSR）或者预渲染来解决History模式带来的SEO问题。
- 兼容性：History API在现代浏览器中得到了广泛的支持，但在一些老旧浏览器中可能无法正常工作。如果你的应用需要支持老旧浏览器，那么你需要使用一些polyfill来提供兼容性。
深入理解：state对象的妙用
state对象是pushState和popstate事件之间传递数据的桥梁。它可以让你在用户导航到不同的历史记录项时，恢复应用的状态。
例如，你可以使用state对象来存储当前页面的滚动位置：
// 保存滚动位置
function saveScrollPosition() {
const scrollY = window.scrollY;
window.history.replaceState({ ...window.history.state, scrollY }, '');
}
// 恢复滚动位置
window.addEventListener('popstate', (event) => {
if (event.state && event.state.scrollY) {
window.scrollTo(0, event.state.scrollY);
}
});
// 在页面卸载前保存滚动位置
window.addEventListener('beforeunload', saveScrollPosition);在这个例子中，我们使用window.history.replaceState来更新state对象，并且在popstate事件中恢复滚动位置。
表格总结：pushState vs replaceState
| 特性 | pushState |
replaceState |
|---|---|---|
| 作用 | 在历史堆栈中添加一个新的记录 | 替换当前的记录 |
| URL变化 | 创建新的URL，并添加到历史记录中 | 替换当前URL，不创建新的历史记录 |
| 历史记录长度 | 增加 | 不变 |
| 适用场景 | 页面跳转，添加新的导航状态 | 更新当前状态，例如保存滚动位置，修改查询参数等 |
常见问题解答
-
为什么需要服务器配置？
因为当用户直接访问History模式下的URL时，服务器需要知道如何处理这些请求。如果没有服务器配置，服务器可能会返回404错误。
-
History模式和Hash模式有什么区别？
History模式使用
pushState和popstate来管理URL，而Hash模式使用URL中的#符号来模拟页面跳转。History模式的URL更美观，但需要服务器配置。Hash模式不需要服务器配置，但URL中会包含#符号。 -
如何处理History模式的SEO问题？
可以使用服务器端渲染（SSR）或者预渲染来解决History模式带来的SEO问题。SSR可以在服务器端渲染出完整的HTML页面，然后将其返回给客户端。预渲染可以在构建时生成静态HTML页面，然后将其部署到服务器上。
结语：掌握History模式，成为Vue Router大师
通过今天的学习，相信大家对Vue Router的History模式有了更深入的了解。掌握pushState和popstate这两个关键先生，你就能更好地理解Vue Router的内部机制，并且能够更加灵活地使用Vue Router来构建你的应用。
记住，学习源码不是为了死记硬背，而是为了理解其背后的设计思想和实现原理。只有理解了这些，你才能真正成为一名Vue Router大师！
好了，今天的讲座就到这里。希望大家有所收获，下次再见！