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 错误。


相关文章
|
6天前
|
JavaScript
Vue3中props的原理与使用
Vue3中props的原理与使用
11 0
|
6天前
|
JavaScript 前端开发
vue中nextTick使用以及原理
vue中nextTick使用以及原理
8 0
|
5天前
|
资源调度 JavaScript 前端开发
阿珊详解Vue路由的两种模式:hash模式与history模式
阿珊详解Vue路由的两种模式:hash模式与history模式
|
6天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
6天前
|
JavaScript
vue中watch监听路由传来的参数变化问题
vue中watch监听路由传来的参数变化问题
8 0
|
6天前
|
缓存 JavaScript
在 Vue 组件中使用计算属性和侦听器来响应路由变化
【5月更文挑战第8天】Vue Router 中,计算属性和侦听器常用于根据路由变化更新组件状态。计算属性缓存依赖,当路由参数改变时自动更新,如示例中的 `userId`。侦听器则监听 `$route` 变化,执行相应操作,例如在 `currentUserId` 示例中响应 `userId` 更新。计算属性适合简单变化,而异步操作或复杂场景可选用侦听器。Vue 3 中,`watchEffect` 减少了部分侦听场景的复杂性。总之,它们用于组件内部响应路由变化,而非直接处理路由逻辑。
20 4
|
5天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
17 0
|
5天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
5天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
5天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
9 0