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


相关文章
|
3月前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
35 1
|
2月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
2月前
|
JavaScript
Vue 双向数据绑定原理
Vue的双向数据绑定通过其核心的响应式系统实现,主要由Observer、Compiler和Watcher三个部分组成。Observer负责观察数据对象的所有属性,将其转换为getter和setter;Compiler解析模板指令,初始化视图并订阅数据变化;Watcher作为连接Observer和Compiler的桥梁,当数据变化时触发相应的更新操作。这种机制确保了数据模型与视图之间的自动同步。
|
3月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
165 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
2月前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
85 9
|
2月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
65 0
|
3月前
|
JavaScript UED
Vue双向数据绑定的原理
【10月更文挑战第7天】
|
3月前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
33 0
|
JavaScript Go

热门文章

最新文章