路由的两种模式

路由在router.js中的书写方式：

hash模式：
路由例如：http://localhost:8080/#/home

history模式：

路由例如: http://localhost:8080/home

两种模式的区别：
1.外观：hash的url有个#符号，显得没有那么美观，而history没有，更好看些；

2.刷新：

hash在刷新页面或直接访问特定路由时会加载到地址栏对应的页面。因为在哈希模式下，路由信息存储在 URL 的哈希部分，并不会发送到服务器端。这意味着服务器不需要特殊配置，因为所有的路由请求都将指向同一个 HTML 文件，然后由客户端的 Vue 应用程序解析并显示相应的组件。

而在使用历史模式history下，路由信息会被发送到服务器端。因此，服务器需要正确配置来处理这些路由请求，以确保在刷新页面或直接访问特定路由时，能够返回正确的页面内容。

3.history模式以后上线需要服务器端支持。

当使用历史模式的路由时，假设我们有一个单页应用，入口文件为index.html。用户在浏览器中访问https://example.com/about，表示用户想要访问关于页面。

如果没有服务器端配置支持，当用户刷新页面或直接访问https://example.com/about时，服务器会试图寻找对应的about.html文件来响应请求。然而，在单页应用中，并没有独立的about.html文件，所有页面内容都包含在index.html中。

因此，需要在服务器端进行配置以确保在刷新页面或直接访问特定路由时能够正确地响应。

（1）对于基于 Node.js 的后端服务器，可以使用 Express 框架进行配置，示例代码如下：

在上述示例中，我们将静态资源目录设置为public文件夹，其中包含了index.html和其他前端资源文件。通过配置一个通配符路由app.get('*', ...)，所有请求都会被重定向到index.html。这样，无论用户刷新页面或直接访问特定路由，都能够正确地响应请求，并让前端路由来处理页面导航。

（2）如果使用的是Apache服务器，可以通过 .htaccess 文件来设置路由重定向规则。以下是一个示例：

（3）如果使用的是Nginx服务器，可以添加一个 try_files 指令来捕获所有的路由请求，并将它们重定向到入口文件。例如：