前端路由模式

文章目录

[一、hash 模式](#一、hash 模式)
- [Hash 模式的特点](#Hash 模式的特点)
- [window.onhashchange 事件](#window.onhashchange 事件)
[二、history 模式](#二、history 模式)
- [history API](#history API)
- [window.onpopstate 事件](#window.onpopstate 事件)
- 解决history模式下页面刷新404问题
如何选择合适的路由模式

一、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 事件：

javascript 复制代码

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

使用 onhashchange 事件处理程序

javascript 复制代码

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

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

javascript 复制代码

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 事件：

javascript 复制代码

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

使用 onpopstate 事件处理程序

javascript 复制代码

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

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

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

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

javascript 复制代码

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 属性来切换路由模式：

javascript 复制代码

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