DAY20240911 VUE:解锁前端路由的奥秘：如何在单页应用中避免404困境？

前言

小知识：在Web开发中，“前后端分离”和“后端渲染模板”是两种常见的架构模式，它们的区别在于如何渲染页面和如何处理路由。

路由模式

在前端开发中，常见的路由模式有两种：Hash模式和History模式。

Hash模式：URL中包含#（例如www.example.com/#/home），其后的部分被视为前端路由。浏览器不会将#后的部分发送到服务器，因此只在前端处理。这种模式实现简单，适用于不需要后端参与的单页应用路由。

History模式：使用HTML5的history.pushState API来实现无#的路由（例如www.example.com/home）。此模式下，URL结构更美观，对SEO更友好，但需要服务器配置以确保所有路由都指向同一个入口文件，否则在刷新页面时会导致404错误。
参考下图url对应的即为history模式

修改我们自己的代码，index.js中 加一句 mode:‘history’,就可以改为没有#形式的url。

测试如下图所示，url中没有了#，测试成功！

常见问题

前后端分离架构中的路由处理问题，特别是在使用History 模式时，浏览器如何区分前端路由和后端路由。？

1. 先有后端路由，再有前端路由

在前后端分离的架构中，通常会有两种类型的路由：

后端路由：后端服务器处理的路由。通常用于API接口，如/api/users、/api/posts等。这些请求会直接发送到服务器，服务器会根据路径返回相应的数据或页面。

前端路由：前端框架（如React、Vue、Angular）使用的路由，用于管理单页应用（SPA）内部的页面跳转，如/home、/about等。这些路由是由前端代码来管理的，不需要后端处理。

“先有后端路由，再有前端路由” 的意思是，在配置服务器时，先要确保所有的后端路由（例如API接口）都正确配置和处理。然后，任何没有被后端路由匹配到的请求都应该交给前端路由来处理。

2. 浏览器分不清是前端路由还是后端路由

当你使用History模式时，**浏览器会认为所有的URL路径（如/home、/about等）都是需要向后端服务器发送请求的。**如果服务器没有为这些路径配置路由处理，就会返回404错误。这是因为浏览器不知道这些路径实际上是由前端框架管理的前端路由。

解决方法

开发时：配置后端服务器，使它能够识别哪些请求是前端路由。在开发环境中，可以通过设置一个规则：“凡是不接受的接口请求，都返回同一个 index.html 页面”，然后前端框架接管路由。这样，无论用户访问什么路径，服务器都会返回前端应用的主页面（如 index.html），然后由前端框架处理具体的路由。

3. 发布和打包

当你发布前端应用时，通常需要将前端代码打包为一个静态文件，这些文件通常存储在一个叫做dist（distribution）文件夹中。

npm run build：这是一个常见的命令，用于打包前端应用。它会把你的源代码（JavaScript、CSS、HTML等）打包成优化的静态文件，并生成一个dist文件夹。

dist 文件夹：这个文件夹包含了你的前端应用的所有静态文件，通常会上传到后端服务器或CDN（内容分发网络）。在生产环境中，服务器会用这个文件夹中的静态文件来响应用户请求。

4. 解决404问题的方法

当你发布应用时，为了避免History模式造成的404问题，通常会进行以下配置：

服务器配置：配置服务器（如Nginx、Apache）确保所有请求都指向index.html。例如，Nginx 配置可以这样做：
location / {
try_files $uri $uri/ /index.html;
}

参考

【1】 https://b23.tv/Hhfpaz2