前端路由模式

一、hash 模式

hash 模式是一种把前端路由的路径用 # 拼接在真实 url 后面的模式，通过 hashchange 事件监听 hash 值的改变来渲染页面对应的组件。hash 模式不会向后端发送 http 请求，所有的 hash 值操作都与后端无关。

使用 location.hash 获取 hash 值。

Hash 模式的特点

• 兼容性好：Hash 模式支持所有现代浏览器，并且在不支持 HTML5 History API 的旧版浏览器上也能正常工作。
• 简单配置：在 Vue 路由中，默认使用 Hash 模式，不需要额外的配置。
• 易于部署：由于使用了 hash，URL 发生变化时不会触发页面刷新，因此部署时只需将静态文件部署到服务器即可。

window.onhashchange 事件

当 URL 的片段标识符（hash 值）更改时，将触发 hashchange 事件 (跟在＃符号后面的 URL 部分，包括＃符号)。

• 使用 addEventListener 监听 hashchange 事件：

window.addEventListener('hashchange', function() {
  console.log('hash值被修改了')
}, false);

• 使用 onhashchange 事件处理程序

function locationHashChanged() {
	if (location.hash === '#/about') {
		console.log("欢迎进入about页面");
	}
}
window.onhashchange = locationHashChanged;

修改 hash 值会优先触发 popstate 事件，然后再触发 hashchange 事件

window.addEventListener('hashchange', function () {
	console.log('hashchage 事件被触发了');
});
// hash值的改变也会触发 window.onpopstate事件，onpopstate事件在 history模式中再做介绍
window.addEventListener("popstate", () => {
	console.log("popstate 事件被触发了");
})

二、history 模式

history 是 HTML5 提供的新特性，允许开发者直接更改前端路由，也就是更改 url 地址而无需向后端发送 http 请求。

history 是 window.history 的简写模式，是 History 构造函数的实例化对象。

History 里面保存着当前标签页的所有浏览页面的访问记录

history API

window.onpopstate 事件

window.onpopstate 事件是用来监听浏览历史记录变化的。

调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。popstate 事件只会在浏览器某些行为下触发，比如点击前进、后退按钮（或者在 JavaScript 中调用 history.back()、history.forward()、 history.go() 方法）。即，在同一文档的两个历史记录条目之间导航会触发该事件。

• 使用 addEventListener 监听 popstate 事件：

window.addEventListener('popstate', function(event) {
  console.log(event);
}, false);

• 使用 onpopstate 事件处理程序

function historyStateChanged(event) {
	console.log(event);
}
window.onpopstate= historyStateChanged;

解决history模式下页面刷新404问题

在 history 下，你可以自由的修改 path，但刷新页面时，如果服务器中没有相应的响应或者资源，则会出现404页面，因为刷新页面会发送 http 请求。也就是说，使用 history 路由模式，需要通过服务端来允许地址可访问，后端也必须配置了当前资源路径地址才行。

如果后台部署使用了 nginx，可以对 nginx 进行如下配置来解决页面刷新问题（摘录）：

server {
	listen	8080;
	server_name  localhost;
	location / {
	    root  'E:\dist';
	    index  /index.html;
	    try_files $uri $uri/ /index.html;
	}
}

如何选择合适的路由模式

使用 Hash 模式：

• 如果你的项目不需要考虑兼容性问题，或者需要在旧版浏览器中支持路由功能。
• 如果你希望简化部署过程，只需将静态文件部署到服务器即可。

使用 History 模式：

• 如果你希望 URL 更加美观、简洁，不希望在 URL 中出现 # 符号。
• 如果你可以进行服务器配置，确保在直接访问 URL 时返回正确的页面。
• 如果你的项目不需要考虑旧版浏览器的兼容性问题。

在 Vue 项目中，可以通过在路由配置中设置 mode 属性来切换路由模式：

const router = new VueRouter({
  mode: 'history', // 或者 'hash'
  routes: [...]
});