Vue3中Vue Router路由器的三种工作模式详解
Vue3中Vue Router路由器的三种工作模式详解
Vue Router支持多种工作模式，每种模式都有其特定的使用场景和配置方式。本文将详细介绍Vue Router的三种工作模式：Hash模式、HTML5 History模式和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 模式
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错误。