hash路由与history 路由的区别

有以下三点:

  1. 1. hash路由是基于浏览器的hashchange事件来监听url中hash值得变化,来实现页面的跳转, 而history路由是基于浏览器的popstate事件来监听改变。

  1. hash路由地址栏中携带#,history路由不携带。

  1. hasy路由更新视图不会重新发送http请求,history路由更新视图会重新请求服务器。

Vue中的路由可以分为基于`hash`的路由基于`history`的路由,它们的主要区别在于如何处理URL以及浏览器的历史记录。 ### 基于hash路由 #### 工作原理: 1. **URL变动**:当用户访问带有路由路径的页面时,URL看起来像是 `http://yourwebsite.com/#/path/to/page` 的形式。这里的`#`后的部分是hash值,而不是真正的HTTP请求路径的一部分。 2. **服务器无关**:这种模式不需要改变服务器配置即可添加路由功能,因为hash值只是客户端内部用于区分不同页面状态的一个标记,并不会触发服务器的HTTP请求。 3. **兼容性**:几乎所有现代浏览器都支持hashchange事件,因此基于hash路由在大多数设备上都能正常工作,包括老版本的IE。 4. **历史记录**:浏览器的前进、后退按钮通常不会影响到hash值的修改,这意味着每一次导航都不会创建新的历史条目。 5. **链接书签**:通过hash值生成的链接容易被复制并粘贴到邮件或其他应用中,因为浏览器默认会忽略`#`及之后的部分。 ### 基于history路由 #### 工作原理: 1. **URL变动**:基于hash路由相反,基于history路由在实际URL中改变了路径,看起来更像是正常的HTTP请求路径,如 `http://yourwebsite.com/path/to/page`。这需要通过特定API(例如HTML5 History API)进行操作。 2. **服务器有关**:为了让基于history路由正常工作,需要在服务器端进行配置,允许动态更改URL。例如,通过设置服务器的响应头(如`RewriteEngine On`),让服务器能够理解当前路径并返回相应的资源。 3. **浏览器历史**:每当你导航到一个新的页面时,浏览器的历史记录会自动更新,包含最近访问过的页面。这对于用户体验来说是一个加分项,因为它利用了浏览器原有的导航功能。 4. **链接书签**:链接书签使用的是实际的URL路径,而不是hash值。这使得外部共享链接更直接地指向内容所在的位置。 ### 实现方式差异 - **安装配置**:对于基于hash路由(如Vue Router默认提供的方式),只需按照官方指南初始化Vue Router即可。而基于history路由则通常涉及额外的配置步骤,如引入并配置`history`模式。 - **性能**:由于涉及到服务器的交互,基于history路由通常在初次加载时可能需要额外时间来完成页面的跳转。 ### 使用场景差异 - **安全性敏感应用**:基于history路由更适合安全性隐私敏感的应用,因为它不使用易受攻击的hash机制。 - **移动应用开发**:对于原生移动应用而言,基于history路由可能是首选方案,因为它更好地利用了平台的原生特性。 总的来说,选择哪种类型的路由依赖于项目的需求、目标平台、对性能的要求以及是否需要考虑SEO等其他因素。了解两者之间的差异可以帮助开发者做出最合适的选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值