Vue的路由实现:hash模式 和 history模式原理

简介: Vue的路由实现:hash模式 和 history模式原理

1.Hash 模式: 在 hash 模式下,URL 中的路由信息会以 # 符号后的内容表示,例如 http://example.com/#/home。当 URL 中的 hash 发生变化时,浏览器不会向服务器发送请求,而是通过监听 hashchange 事件来响应 URL 的变化,并根据新的 hash 值进行路由的切换。


Vue Router 默认使用 hash 模式。它通过在页面中插入一个隐藏的 iframe,使用 onhashchange 事件监听 URL 的变化。当路由切换时,Vue Router 会根据新的 hash 值匹配对应的路由组件,并将组件渲染到页面中。


优点:hash 模式在所有浏览器中都能良好地工作,不需要额外的服务器配置。


缺点:URL 中的 # 符号可能会被视为页面内的锚点,对搜索引擎的友好度较低。


2.History 模式: 在 history 模式下,URL 中的路由信息不再使用 # 符号,而是直接使用正常的 URL 地址,例如 http://example.com/home。当 URL 发生变化时,浏览器会向服务器发送请求,服务器需要配置来确保对任何 URL 请求都返回相同的 HTML 页面,然后由前端路由来处理 URL 的变化。


在使用 history 模式时,需要在服务器配置中添加一个规则,将所有的 URL 请求重定向到前端的入口页面,例如 index.html。这样,在刷新页面或直接访问某个路由时,服务器会返回入口页面,并由前端路由来处理路由的切换。


在 Vue Router 中启用 history 模式,需要通过服务器配置来确保所有的 URL 请求都返回入口页面。这可以在 Vue CLI 的配置文件中进行设置,或者通过在服务器上添加相应的规则来实现。


优点:URL 更加友好,没有 # 符号,更符合正常的 URL 地址格式。


缺点:需要额外的服务器配置来确保所有的 URL 请求都返回入口页面,否则会出现 404 错误。


相关文章
|
9天前
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
48 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
4天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
6 0
|
4天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
9 0
|
4天前
|
JavaScript
【vue】 vue如何根据不同路由地址更改页面的标题
【vue】 vue如何根据不同路由地址更改页面的标题
5 0
|
4天前
|
JavaScript
【vue】 vue中判断路由变化 | 监听路有变化
【vue】 vue中判断路由变化 | 监听路有变化
8 0
|
11天前
|
JavaScript 数据安全/隐私保护
vue实战——路由访问权限【详解】
vue实战——路由访问权限【详解】
10 0
|
2天前
|
JavaScript
|
4天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
16 6
|
1天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
10 2