【vue3|第20期】vue3中Vue Router路由器工作模式

日期：2024年8月6日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 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 错误。

参考文章：