前端路由

# 问题记录

笔记

在部署网页到github-pages上时，发现我的网页只有根路由可以直接通过url访问，而其他路由不行，只能通过将history路由更改为hash路由才能正常访问

因此，我发现自己在路由方面的知识还有所不足，特意写下此篇作为记录。

在 web 开发早期，一直是后端路由占据主要地位，每次用户发出请求，URL就会发生变化，后端收到请求之后就会根据路由渲染对应的页面，将页面返回到本地。

提示

前端路由是单页面应用兴起之后才开始出现的。

早起的前端路由实现就是基于location.hash来实现的，location.hash就是路由#后面的内容，其原理就是通过hashchange监听#后面的内容的变化来进行页面更新。hash模式是利用浏览器不会对#后面的路径对服务端发起请求。

使用hash模式有两个特点：

改变hash值，浏览器不会重新加载页面
当刷新页面时，hash不会传给服务器
也就是说http://localhost/#a与http://localhost/这两个路由其实都是去请求http://localhost这个页面的内容，至于为什么它们可以渲染出不同的页面，这个是前端自己来判断的，不需要后端配置。

优点：

可以兼容低版本浏览器，支持IE8
只有#之前的内容才会作为URL发送给服务器，就算服务端没有对路由进行全覆盖也不会返回404
hash改变都会在浏览器访问的历史记录中增加一个记录，所以可以通过浏览器进行前进后退，如果想在hash模式下不保存记录，可以使用location.replace

history是基于HTML5新增的pushState和replaceState两个API以及浏览器的popState事件监听历史栈的改变，只要历史栈有信息发生改变，就会触发该事件。这种模式同样也是不会向后端发起请求的。

优点：

缺点：

vue-router会检测浏览器版本，当无法启用history模式时会自动降级为hash模式

最近更新～: 2024/08/19, 01:05:55