Vue 3 路由模式有哪几种?(图文讲解)
一则或许对你有用的小广告
欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书活动
目前,
星球
内第一个项目:全栈前后端分离博客项目,演示地址:http://116.62.199.48/, 1.0 版本已经更新完毕,正在更新 2.0 版本。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4
,手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 224 小节,累计 35w+ 字,讲解图:1544 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 1000+ 小伙伴加入,欢迎点击围观
。
本小节中,我们来讲讲 Vue Router 的路由模式。Vue Router 提供了两种主要的路由模式,分别是:
-
Hash 模式 ;
-
History 模式;
1. 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 模式
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 提供了两种路由模式,让开发者能够根据项目需求选择最适合的模式,从而实现良好的用户体验和搜索引擎优化。