Vue 3 路由模式有哪几种？（图文讲解）

2024-07-03 00:27| 来源: 网络整理| 查看: 265

一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / Java 学习路线 / 1v1 提问 / 学习打卡 / 每月赠书活动

目前，星球内第2个项目《仿小红书（微服务架构）》正在更新中。第1个项目：全栈前后端分离博客项目2期已经完结，演示地址：http://116.62.199.48/。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4，手把手，前端 + 后端全栈开发，从 0 到 1 讲解每个功能点开发步骤，1v1 答疑，陪伴式直到项目上线，目前已更新了 288 小节，累计 45w+ 字，讲解图：2012 张，还在持续爆肝中，后续还会上新更多项目，目标是将 Java 领域典型的项目都整上，如秒杀系统、在线商城、IM 即时通讯、权限管理等等，已有 1600+ 小伙伴加入，欢迎点击围观 。

本小节中，我们来讲讲 Vue Router 的路由模式。Vue Router 提供了两种主要的路由模式，分别是：

Hash 模式；

History 模式；

1. Hash 模式

Vue Router 路由模式: Hash 模式

Hash 模式是 Vue Router 默认的路由模式。在这种模式下，URL 中会包含一个带有 # 符号的哈希部分。例如：

http://example.com/#/about 1.2 工作原理

Hash 模式基于浏览器的 window.location.hash 属性。当 URL 中的哈希部分发生变化时，Vue Router 会监听到这个变化，并相应地切换视图。

1.3 优势兼容性： Hash 模式在不同浏览器之间的兼容性较好，因为浏览器对于哈希部分的处理方式基本一致。无需服务器支持：不需要后端服务器的特殊配置，可以在任意静态服务器上使用。 1.4 缺点 URL 美观度： URL 中带有 # 符号，可能不够美观。 SEO 不友好：对搜索引擎的优化相对较差，因为搜索引擎不会将哈希部分的内容作为独立的页面来处理。 1.5 开启方式 import { createRouter, createWebHashHistory } from 'vue-router' // 省略... // 创建路由 const router = createRouter({ history: createWebHashHistory(), // routes: routes 的缩写 routes, }) // 省略... 2. History 模式

Vue Router 路由模式: History 模式

History 模式是另一种路由模式，它使得 URL 不再带有 # 符号，呈现出更加干净美观的形式。例如：

http://example.com/about 2.1 工作原理

History 模式使用浏览器的 History API，通过修改浏览器的历史记录来实现前端路由的切换。在这种模式下，需要确保在任何路径下都返回同一个 HTML 文件，以便 Vue Router 能够正确处理路由。

2.2 优势 URL 美观度： URL 更加美观，不带有 # 符号。 SEO 友好：对搜索引擎的优化更好，因为搜索引擎能够更好地处理没有哈希部分的 URL。 2.3 缺点兼容性：兼容性相对较差，需要服务器的支持，且在某些环境中可能需要额外的配置。需要服务器支持：刷新页面或直接访问某个路由时，服务器需要正确处理这个路由。 2.4 开启方式 import { createRouter, createWebHistory } from 'vue-router' // 省略... // 创建路由 const router = createRouter({ history: createWebHistory(), // routes: routes 的缩写 routes, }) // 省略... 3. 如何选择？

在选择路由模式时，需要根据项目的具体需求来权衡各自的优劣势。如果项目不需要考虑服务器配置，对 URL 的美观度要求不高，并且不涉及 SEO 优化，那么 Hash 模式是一个简便可行的选择。如果追求更友好的 URL，更好的 SEO 支持，同时愿意处理一些服务器配置的问题，那么可以选择 History 模式。

总的来说，Vue Router 提供了两种路由模式，让开发者能够根据项目需求选择最适合的模式，从而实现良好的用户体验和搜索引擎优化。

【本文地址】

公司简介

联系我们