前端路由hash模式以及history模式详解

这篇具有很好参考价值的文章主要介绍了前端路由hash模式以及history模式详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

前言

在前后端分离的项目中,前端一般使用 SPA 单页面应用模式来开发项目。那么,什么是 SPA 呢?

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

我的理解:单页面应用就是改变页面的url地址,不会向后台发送请求,而是通过前端路由,动态渲染页面组件,url地址的改变与后台无关

而前端路由又分为两种模式:

  1. hash 模式
  2. history 模式

两种模式的对比:

对比 hash 模式 history 模式
url 显示 url 中带"#" url 中不带"#"
回车刷新(浏览器刷新按钮) 页面正常显示 后端未配置则页面显示404
支持版本 支持低版本浏览器和 IE 浏览器 HTML5 新推出的 API

前端路由的本质,是监听 url 地址或 hash 值的改变,来切换并渲染对应的页面组件

接下来让我们详细了解一下两种路由模式。

一、hash 模式

1、hash 定义

hash 模式是一种把前端路由的路径用 # 拼接在真实 url 后面的模式,通过 hashchange 事件监听 hash 值的改变来渲染页面对应的组件。hash 模式不会向后端发送 http 请求,所有的 hash 值操作都与后端无关。

使用 location.hash 获取 hash 值。

以 url 地址: http://localhost:8080/#/about 为例:

history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

2、location 对象

location 是 window.location 或者 document.location 的简写模式。

history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

让我们来看看 location 有哪些常用属性:

以 url 地址:http://localhost:8080/#/about?name=she&age=16 示例:

属性 解释
hash 设置或返回从#开始的锚点信息 #/about?name=she&age=16
host 设置或返回主机名+端口号 localhost:8080
hostname 设置或返回主机名 localhost
port 设置或返回端口号 8080
href 设置或返回完整的 URL http://localhost:8080/#/about?name=she&age=16
origin 设置或返回协议+主机+端口 http://localhost:8080
pathname 设置或返回当前 URL 的路径 /(hash 值不算在路径里面,此处返回的是#之前的斜杠)
protocol 设置或返回当前协议 http:
search 设置或返回从?开始的查询字符串 ?name=she&age=16

location 常用方法:

方法名 解释 语法
assign() 加载并显示指定的 URL 的内容 location.assign(url);
reload() 刷新当前页面,就像刷新按钮一样 location.reload();
replace() 以给定的 URL 来替换当前的资源 location.replace(url);

调用 location.replace() 方法后,当前页面不会保存到会话历史中(session History),这样,用户点击回退按钮时,将不会再跳转到该页面。

history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

3、window.onhashchange 事件

当 URL 的片段标识符(hash 值)更改时,将触发 hashchange 事件 (跟在#符号后面的 URL 部分,包括#符号)。

  • 使用 addEventListener 监听 hashchange 事件:

    window.addEventListener('hashchange', function() {
      console.log('hash值被修改了')
    }, false);
    
  • 使用 onhashchange 事件处理程序

    function locationHashChanged() {
    	if (location.hash === '#/about') {
    		console.log("欢迎进入about页面");
    	}
    }
    window.onhashchange = locationHashChanged;
    

测试 hashchage 事件:

window.addEventListener('hashchange', function () {
	console.log('hashchage 事件被触发了');
});
// hash值的改变也会触发 window.onpopstate事件,onpopstate事件在 history模式中再做介绍
window.addEventListener("popstate", () => {
	console.log("popstate 事件被触发了");
})

history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

直接修改浏览器url地址,添加 hash 值 #/about。可以看出,修改 hash 值会优先触发 popstate 事件,然后再触发 hashchange 事件:
history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

重新获取 hash 值:

history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

二、history 模式

1、history 定义

history 是 HTML5 提供的新特性,允许开发者直接更改前端路由,也就是更改 url 地址而无需向后端发送 http 请求。

history 是 window.history 的简写模式,是 History 构造函数的实例化对象。

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

也就是说 History 里面保存着当前标签页的所有浏览页面的访问记录

2、history API

  1. 实例化对象属性

    属性 解释
    length 会话历史记录中元素的数目,包括当前加载的页面 Integer(整型数值)
    scrollRestoration 设置浏览器的默认滚动行为 auto(默认值,浏览器自动滚动) / manual(关闭浏览器自动滚动)
    state 返回一个表示历史堆栈顶部的状态的任意值 any(任意值)
  2. 实例化对象方法

    方法名 解释 语法
    back() 在会话历史记录中向后移动一页。如果没有上一页,则此方法调用不执行任何操作 window.history.back()
    forward() 在会话历史中向前移动一页 window.history.forward();
    go() go方法从会话历史记录中加载特定页面 window.history.go(-1); 负值表示向后移动back(),正值表示向前移动forward(); 值为0或不传时重新加载当前页面
    pushState() 向当前浏览器历史中添加记录 history.pushState(state, title[, url])
    replaceState() 修改当前历史记录实体,可以更新 state 对象以及 URL 地址。 history.replaceState(stateObj, title[, url]);
  3. history.pushState()的使用

    history.pushState() 方法接收三个参数:

    • state:一个对象,popState 事件触发时,state 对象会传入回调函数。如无需传参,则设置为 null

    • title:新页面的标题,但是所有浏览器目前都忽略这个值,因此可以设置为空字符串 "" 或者 null

    • url:新的网址地址,必须与当前页面处于同一个域下,浏览器的地址栏将显示这个网址。

      接下来做一个测试,有一个 a.html 页面:
      history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

      使用 pushState 方法添加一条记录到 History 会话历史中,并传参:
      history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5
      使用 pushState 添加一条记录后,url 地址更新,但是页面并没有更新,也就是说 pushState 方法只是更新了 url 地址
      使用 length 以及 state 查看:
      history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

  4. history.replaceState()的使用

    history.replaceState() 方法接收的参数与 history.pushState() 方法相同,唯一的不同是,使用 replaceState 会更新当前页面的记录,包括 state 对象和 URL 地址

    举个例子,使用 pushState 添加 a.html b.html c.html 三个记录,然后使用 replaceState 添加 d.html ,最后查看历史记录栈中收录了几条历史记录:
    history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5
    history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5
    由上图可知,历史记录栈中只存有三条记录,即 ["a.html", "b.html", "d.html"]。原因就是 replaceState 将 c.html 替换为了 d.html

    所以使用 history.back() 会返回 b.html
    history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5
    使用 history.forward() 也只会显示 d.html
    history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

3、window.onpopstate 事件

window.onpopstate 事件是用来监听浏览历史记录变化的。

调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。popstate 事件只会在浏览器某些行为下触发,比如点击前进、后退按钮(或者在 JavaScript 中调用 history.back()history.forward()history.go() 方法)。即,在同一文档的两个历史记录条目之间导航会触发该事件

  • 使用 addEventListener 监听 popstate 事件:

    window.addEventListener('popstate', function(event) {
      console.log(event);
    }, false);
    
  • 使用 onpopstate 事件处理程序

    function historyStateChanged(event) {
    	console.log(event);
    }
    window.onpopstate= historyStateChanged;
    

测试,使用 popstate 监听记录栈的改变:

window.addEventListener("popstate", (event) => {
	console.log(event);
})

使用 pushState 以及 replaceState 并未触发 popstate 事件:
history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

使用 history.back() ,触发了 popstate 事件并打印了参数 event,从下图可以看出 event事件对象中保存着 state 对象

history模式,# JavaScript,# Vue,javascript,前端路由,hash,history,HTML5

4、解决history模式下页面刷新404问题

在 history 下,你可以自由的修改 path,但刷新页面时,如果服务器中没有相应的响应或者资源,则会出现404页面,因为刷新页面会发送 http 请求。也就是说,使用 history 路由模式,需要通过服务端来允许地址可访问,后端也必须配置了当前资源路径地址才行。

如果后台部署使用了 nginx,可以对 nginx 进行如下配置来解决页面刷新问题(摘录):文章来源地址https://www.toymoban.com/news/detail-694392.html

server {
	listen	8080;
	server_name  localhost;
	location / {
	    root  'E:\dist';
	    index  /index.html;
	    try_files $uri $uri/ /index.html;
	}
}

到了这里,关于前端路由hash模式以及history模式详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3如何切换hash/history两种路由模式

    本文介绍了在vue3中,如何使用history和hash两种路由模式的方法 1、history模式 使用createWebHistory 2、hash模式 使用createWebHashHistory 综上所述: history 对应 createWebHistory hash 对应 createWebHashHistory

    2024年02月13日
    浏览(39)
  • Vue学习笔记 之 History 路由 和 Hash 路由的区别 及 History 模式时,Nginx的配置方式

    一、History 模式、Hash 模式   Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用的前端路由。它允许你通过定义路由配置来映射不同的 URL 到对应的组件,实现页面间的跳转和导航。Vue Router 支持两种路由模式:history 模式和 hash 模式。 1、History 模式   在 History 模式

    2024年02月07日
    浏览(35)
  • 路由的hash和history模式的区别

    目录 ✅ 路由模式概述 一. 路由的hash和history模式的区别 1. hash模式 2. history模式 3. 两种模式对比 二. 如何获取页面的hash变化 单页应用是在移动互联时代诞生的,它的目标是不刷新整体页面,通过地址栏中的变化来决定内容区域显示什么内容。 要达成这个目标,我们要用到前

    2024年02月14日
    浏览(38)
  • Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(useRouter,useRoute)的使用 路由懒加载、路由分包处理、魔法注释的使用

     html部分 js部分  html页面使用路由传来的参数  获取router跳转id 获取 路由跳转错误地址

    2024年02月11日
    浏览(43)
  • Vue history和hash模式

             ~~~~~~~~                 在Vue.js中,路由模式是用来管理应用程序中不同页面之间的导航的机制。Vue Router支持两种常见的路由模式:history模式和hash模式。 History 模式:          ~~~~~~~~                 History模式使用浏览器的history.pushState API 来管理路由。它

    2024年02月12日
    浏览(35)
  • vue3中路由hash与History的设置

     history模式直接指向history对象,它表示当前窗口的浏览历史,history对象保存了当前窗口访问过的所有页面网址。URL中没有#,它使用的是传统的路由分发模式,即用户在输入一个URL时,服务器会接收这个请求,并解析这个URL,然后做出相应的逻辑处理。 当使用history模式时,

    2024年02月16日
    浏览(64)
  • Vue-router中的Hash模式与History模式

    在Vue Router中,Hash模式是一种URL的哈希模式,也被称为锚点模式。在Hash模式下,URL中的哈希部分(即#号后面的内容)会被用作路由的标识符,而不会触发浏览器向服务器发送请求。 Hash模式的URL示例: http://example.com/#/home 在Hash模式下,Vue Router会监听URL中哈希部分的变化,并

    2024年02月15日
    浏览(43)
  • [JavaScript进阶] 路由跳转原理 之 Hash 模式

    首先讲讲路由跳转的原理, 其实没有什么神秘的, 以变量类比: 在上文的代码中, 在监听到点击事件的时候, 会改变变量的值. 那么, 如果不再监听点击事件, 而是 监听页面路径改变 ; container 也不是一个变量而是一个HTML元素, 当监听回调触发时, 修改的是这个 container 元素内部的

    2024年02月05日
    浏览(48)
  • VUE 配置history路由模式配置

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 当你使用 history 模式时,URL 就像正常

    2024年02月10日
    浏览(42)
  • Vue路由模式(history模式 刷新页面空白解决方案)

    vue路由的三种模式 Hash模式 、 History模式 、 abstract 模式 Vue3: Hash 模式是用 createWebHashHistory() 创建的: Vue2 它在内部传递的实际 URL 之前使用了一个哈希字符(#)。由于这部分 URL 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理。不过,它在 SEO 中确实有

    2024年02月12日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包