Vue路由的两种模式:hash模式与history模式详解和对比
Vue的路由实现有hash模式、history 模式和abstract 模式。根据mode 参数来决定采用哪一种方式。
hash: 使用 URL hash 值来作路由。默认模式。
history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式
export default new Router({
mode: 'history',
routes: [
{
path: '/about',
name: 'about',
component: () => import('@/components/About.vue')
},
{
path: '/',
name: 'home',
component: () => import('@/components/Home.vue')
}
]
})
hash模式
Hash 模式是 Vue Router 默认的路由模式,在这种模式下,URL 中会包含一个带有 # 符号的哈希部分,例如
http://localhost:8088/#/home
工作原理
Hash 模式基于浏览器的 window.location.hash 属性。当 URL 中的哈希部分发生变化时,Vue Router 会监听到这个变化,并相应地切换视图。
优点:
兼容性: Hash 模式在不同浏览器之间的兼容性较好,因为浏览器对于哈希部分的处理方式基本一致。
无需服务器支持: 不需要后端服务器的特殊配置,可以在任意静态服务器上使用。
缺点:
URL 美观度: URL 中带有 # 符号,可能不够美观。
SEO 不友好: 对搜索引擎的优化相对较差,因为搜索引擎不会将哈希部分的内容作为独立的页面来处理。
history模式
History 模式是另一种路由模式,它使得 URL 不再带有 # 符号,呈现出更加干净美观的形式。例如:
http://localhost:8088/home
工作原理
History 模式使用浏览器的 History API,通过修改浏览器的历史记录来实现前端路由的切换。在这种模式下,需要确保在任何路径下都返回同一个 HTML 文件,以便 Vue Router 能够正确处理路由。
优点:
URL 美观度: URL 更加美观,不带有 # 符号。
SEO 友好: 对搜索引擎的优化更好,因为搜索引擎能够更好地处理没有哈希部分的 URL。
缺点:
兼容性: 兼容性相对较差,需要服务器的支持,且在某些环境中可能需要额外的配置。
需要服务器支持: 刷新页面或直接访问某个路由时,服务器需要正确处理这个路由。
hash模式和history模式在项目中如何选择?
在选择路由模式时,需要根据项目的具体需求来权衡各自的优劣势。如果项目不需要考虑服务器配置,对 URL 的美观度要求不高,并且不涉及 SEO 优化,那么 Hash 模式是一个简便可行的选择。如果追求更友好的 URL,更好的 SEO 支持,同时愿意处理一些服务器配置的问题,那么可以选择 History 模式。