日期：2024年8月6日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01365 = 37.7834；0.99365 = 0.0255
1.02365 = 1377.4083；0.98365 = 0.0006
说在最前面：本文
vue3的示例代码，在没有另外声名的情况下，均采用<script setup>组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^
文章目录
- 一、前言
- 二、3种路由器工作模式
- 1. Hash 模式
- 2. HTML5 History 模式
- 3. Abstract 模式
- 四、注意事项
- 五、结语
一、前言
Web 页面的工作方式是通过 HTTP 请求从服务器获取HTML文档，然后由浏览器解析并显示内容。随着 Web 应用的发展，特别是单页应用（SPA）的流行，需要在不重新加载整个页面的情况下，更新页面的部分内容。Vue Router 支持多种工作模式，每种模式都有其特定的使用场景和配置方式。本文将详细介绍 Vue Router 的三种工作模式：Hash 模式、HTML5 History 模式 和 Abstract 模式。
二、3种路由器工作模式
1. Hash 模式
例如，http://example.com/#/page1 中，#/page1 就是哈希值。
Hash 模式是一种常见的路由工作方式。在这种模式下，URL 中的哈希值被用于表示路由信息。当哈希值发生变化时，页面不会进行重新加载，而是由 Vue Router 来处理路由的切换。这种模式的一个优点是不需要服务器端配置额外的路由，因为 # 后面的内容不会发送到服务器。
语法：
history: createWebHashHistory()
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;
在上述代码中，createWebHashHistory() 创建了一个基于 Hash 的历史记录模式。用户访问 / 时会显示 Home 组件，访问 /about 时会显示 About 组件。
2. HTML5 History 模式
http://example.com/page1
HTML5 History 模式利用了 HTML5 History API，允许我们使用正常的 URL 路径，而不需要在 URL 中包含 # 符号。这种模式提供了更加美观的 URL，但需要服务器端进行相应的配置，以便在用户访问应用中的不同路径时返回相同的页面。
语法：
history: createWebHistory()
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
使用 createWebHistory() 创建基于 HTML5 History API 的历史记录模式。与 Hash 模式类似，但提供了更为标准的 URL 形式。
3. Abstract 模式
Abstract 模式是一种用于非浏览器环境的路由模式，例如在 Node.js 服务器端渲染时使用。这种模式不依赖于浏览器的历史记录 API，因此可以在任何 JavaScript 环境中运行。
语法：
history: createMemoryHistory()
import { createRouter, createMemoryHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createMemoryHistory(),
routes,
});
export default router;
通过 createMemoryHistory() 创建一个不依赖浏览器历史记录 API 的路由历史模式，适用于特定的环境，如服务器端渲染。
四、注意事项
- 在使用
HTML5 History模式时，务必确保服务器正确配置，否则用户直接访问一个子路由可能会遇到 404 错误。 Hash模式虽然URL看起来不够优雅，但它无需服务器端配置，适用于快速原型开发和受限的服务器环境。Abstract模式通常用于服务器端渲染等特殊场景，不适用于常规的浏览器环境。
五、结语
Vue Router 在 Vue3 中支持 Hash 模式、History 模式和 Abstract 模式。每种模式都有其适用场景和优缺点。在实际开发中，应根据项目需求和部署环境选择合适的模式。对于大多数现代 web 应用，推荐使用 History 模式以获得更好的用户体验和 SEO 优化效果。同时，需要注意服务器配置问题，以确保在 History 模式下刷新页面时不会出现 404 错误。
参考文章：
- 《Vue Router》
版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/140953290
