집 > 기사 > 웹 프론트엔드 > Vue 프런트 엔드 라우팅에서 해시와 기록의 차이점에 대한 간략한 분석

Vue 프런트 엔드 라우팅에서 해시와 기록의 차이점에 대한 간략한 분석

青灯夜游앞으로: 2022-05-13 15:18:162995검색

Vue프런트엔드 라우팅 해시와 기록의 차이점은 무엇인가요? 이번 글에서는 프론트엔드 라우팅 해시와 히스토리의 차이점에 대해 알아보겠습니다. 모두에게 도움이 되기를 바랍니다.

vue인지 react인지 이 두 경로를 이해하기 전에 hash에서 필연적으로 경로 중에서 선택하게 됩니다. 와 history 는 필연적으로 얽히게 됩니다. 그렇지 않으면 이 내용을 읽은 후에는 그냥 혼란스러워지고 #와 함께 기본 hash 경로를 사용하게 됩니다. 나중에 선택할 경로를 선택하는 데 어려움이 없도록 기사를 공유하고 요청 시 선택할 수 있습니다. 궁금한 점이 있으시면 댓글란에 지적해 주시고 함께 소통해 가세요. vue还是 react 在项目创建时难免会进行路由之间选择,在 hash 和 history 难免会纠结一番,或者是直接稀里糊涂用了默认带 # 的 hash 路由，看完这篇分享,保准让你之后不会在为选择哪中路由犯难,实现按需选择。有疑问欢迎在评论区指出，大家一起沟通。

简单介绍 Vue Router

Vue Router 是 Vue.js 官方的路由插件，它和 Vue.js 是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在 vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。（学习视频分享：vue视频教程）
至于我们为什么不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的 index.html 页面，所以你写的标签是不起作用的，你必须使用 vue-router 来进行管理。

Vue Router 实现原理

在了解路由模式前，我们要先清楚，vue-roter 的实现原理是怎样的，什么是单页面应用，特点是什么，这样更容易加深对路由的理解。
SPA 单页面及应用方式:单一页面应用程序，只有一个完整的页面；它在第一次加载页面时,就将唯一完整的 html 页面和所有其余页面组件一起下载下来，这样它在切换页面时，不会加载整个页面，而是只更新某个指定的容器中内容。
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面。
路由器对象底层实现的三大步骤即(1)监视地址栏变化；(2)查找当前路径对应的页面组件；(3)将找到的页面组件替换到 router-vieW 的位置。
vue-router 在实现单页面前端路由时，提供了两种方式：Hash 模式和 History 模式；vue2 是根据 mode 参数来决定采用哪一种方式，vue3 则是 history 参数，下面我们将围绕这个属性进行进一步了解。

Hash

简述

Vue 프런트 엔드 라우팅에서 해시와 기록의 차이점에 대한 간략한 분석

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是 URL 的锚点，代表的是网页中的一个位置，单单改变 # 后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 # 是用来指导浏览器动作的，对服务器端完全无用，HTTP 请求中也不会不包括 # ，同时每一次改变 # 后的部分，都会在浏览器的访问历史中增加一个记录，使用 "后退" 按钮，就可以回到上一个位置，所以说 hash 模式通过锚点值的改变，根据不同的值，渲染指定 DOM 位置的不同数据。
# 符号本身以及它后面的字符称之为 hash，可通过 window.location.hash

Vue Router에 대한 간략한 소개
- Vue Router는 Vue.js 공식 라우팅 플러그인입니다. 단일 페이지 애플리케이션 구축에 적합한 Vue.js 통합을 통한 깊이. vue의 단일 페이지 애플리케이션은 라우팅 및 구성 요소를 기반으로 하며 라우팅은 액세스 경로를 설정하고 구성 요소에 경로를 매핑하는 데 사용됩니다. 기존 페이지 애플리케이션은 일부 하이퍼링크를 사용하여 페이지 전환 및 점프를 수행합니다. vue-router 단일 페이지 애플리케이션에서는 경로 간 전환, 즉 구성 요소 전환입니다. 라우팅 모듈의 핵심은 URL과 페이지 간의 매핑 관계를 설정하는 것입니다. (학습 영상 공유: vue video tutorial🎜)
- a 태그를 사용할 수 없는 이유는 Vue를 사용하는 모든 것이 단일 페이지 애플리케이션이기 때문입니다. 이는 기본 index.html 페이지가 하나만 있는 것과 같습니다. 🎜 태그가 작동하지 않으면 vue-router를 사용해야 합니다. 그들을 관리하십시오.
Vue 라우터 구현 원칙
- 🎜라우팅 모드를 이해하기 전에 다음이 필요합니다. 먼저 vue-roter의 구현 원리와 단일 페이지 애플리케이션이 무엇인지, 그리고 그 특징이 무엇인지 명확히 하면 라우팅에 대한 이해가 더 깊어질 것입니다. 🎜
- 🎜SPA 단일 페이지 및 적용 방법: 단일 페이지 애플리케이션에는 처음으로 페이지를 로드할 때 전체 페이지가 하나만 로드됩니다. code >html 페이지는 다른 모든 페이지 구성 요소와 함께 다운로드되므로 페이지를 전환할 때 전체 페이지를 로드하지 않고 지정된 컨테이너의 콘텐츠만 업데이트합니다. 🎜
- 🎜단일 페이지 애플리케이션(SPA)의 핵심 중 하나는 페이지를 다시 요청하지 않고 뷰를 업데이트하는 것입니다. 🎜
- 🎜라우터 개체의 기본 구현의 세 가지 주요 단계는 (1) 주소 표시줄의 모니터링 (2)찾기입니다. 현재 경로에 해당하는 페이지 구성 요소.(3) 발견된 페이지 구성 요소를 router-view 위치로 바꿉니다. 🎜
- 🎜vue-router는 단일 페이지 프런트엔드 라우팅을 구현할 때 Hash 모드와 History라는 두 가지 방법을 제공합니다. Mode; vue2는 mode 매개변수를 기반으로 사용할 방법을 결정하는 반면, vue3은 history 매개변수를 사용합니다. 아래에서 이 속성에 대해 자세히 알아봅니다. 🎜🎜🎜 li>
해시

간략한 설명
🎜🎜
- 🎜vue-router 기본 해시 모드 - URL 해시를 사용하여 전체 URL을 시뮬레이션하므로 URL이 변경되면 페이지가 다시 로드되지 않습니다. hash(#)는 URL의 앵커 포인트로, 웹페이지에서의 위치를 나타냅니다. # 뒤의 부분과 브라우저를 변경하면 됩니다. 해당 위치로 스크롤만 하고 웹페이지를 다시 로드하지는 않습니다. 즉, #는 브라우저의 동작을 안내하는 데 사용되며 HTTP는 전혀 쓸모가 없습니다. code>는 요청에 사용되지 않습니다. <code>#는 포함되지 않습니다. 동시에 # 뒤의 부분이 변경될 때마다 레코드가 추가됩니다. 브라우저의 액세스 기록을 반환하려면 "뒤로" 버튼을 사용하세요. 따라서 hash 모드는 앵커 포인트 값을 변경하여 지정된 DOM 위치에 다른 데이터를 렌더링합니다. 다른 가치로. 🎜
- 🎜# 기호 자체와 기호 뒤의 문자를 해시라고 하며 window.location.hash를 전달할 수 있습니다. 코드> 속성 읽기. 🎜
Features
- hash URL에는 표시되지만 HTTP 요청에는 포함되지 않습니다. 브라우저 작업을 안내하는 데 사용되며 서버 측에서는 전혀 쓸모가 없습니다. 따라서 해시를 변경해도 페이지가 다시 로드되지 않습니다.hash 虽然出现在URL中，但不会被包括在 HTTP 请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变 hash 不会重新加载页面
- 可以为 hash 的改变添加监听事件：
- ```
   window.addEventListener("hashchange", fncEvent, false)
```
- 每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录
- url 带一个 # 号。
设置
- vue3 设置 hash 模式路由
history

简述
- history 是路由的另一种模式，由于 hash 模式会在 url 中带#，如果不想要带 #的话，我们可以使用路由的 history 模式，只需要在响应的 router 配置规则时,加上即可，vue 的路由默认是 hash 模式。
- 利用了HTML5 History Interface中新增的 pushState() 和 replaceState() 方法。
- 这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
设置

特点
- 路由跳转不需要重新加载页面。
- 不带 # 在大部分人看来要比 hash 路由好看许多。
- 兼容性没有 hash 好，会在下面展开说明
生产环境问题及解决
- 当我们把 history 项目部署到服务器中后,此时我们在浏览器输入一个网址(比如是 www.test.com ), 此时会经过 dns 解析，拿到 ip 地址后根据 ip 地址向该服务器发起请求,服务器接受到请求后,然后返回相应的结果(html,css,js)。如果我们在前端设置了重定向，此时页面会进行跳转到 www.test.com/home ,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话，浏览器会发送新的请求 www.test.com/home, 如果后端服务器没有 /home 对应的接口，那么就会返回404。
- 生产环境刷新 404 的解决办法可以在 nginx 做代理转发，在 nginx 中配置按顺序检查参数中的资源是否存在，如果都没有找到，让 nginx 内部重定向到项目首页。
开发环境- historyApiFallback
- 有些小伙伴会有疑问,为什么开发环境没有遇到这个问题呢，不是和生产同样的刷新操作嘛。
- 这里我也是疑问了一下，经查阅相关资料后发现在 vue-cli 中 webpack 帮我们做了处理
- 如果我们把该配置改位 false,浏览器会把我们这个当做是一次 get 请求，如果后端没有对应的接口,就会出现下面这个报错提示。
总结
- 至此我们使用知道了 vue-roter 的两种路由模式，及差异化，简单来讲就是，hash 路由兼容梗好，但是带#显得丑些， histroy
  해시의 변경 사항에 대한 수신 이벤트를 추가할 수 있습니다. : 🎜🎜rrreee🎜🎜해시(window.location.hash)가 변경될 때마다 브라우저의 접속 기록🎜🎜url에 #와 함께 기록이 추가됩니다. 숫자. 🎜🎜
  🎜Settings🎜🎜🎜🎜vue3 설정 해시 패턴 라우팅
  
  🎜🎜🎜
  
  🎜history🎜 h2>
  🎜간단한 설명🎜🎜
  
  🎜🎜🎜history는 또 다른 라우팅 모드입니다. 해시 모드에는 URL에 #이 포함되므로 원하지 않는 경우 #, history 라우팅 모드를 사용할 수 있습니다. router 응답에서 규칙을 구성할 때 vue 라우팅만 추가하면 됩니다. 기본값은 hash 모드입니다. 🎜🎜HTML5 기록 인터페이스에서 새로운 pushState() 및 replaceState() 메서드를 사용합니다. 🎜🎜이 두 가지 메소드는 브라우저의 히스토리 스택에 적용되어 기존 back,forward,go를 기반으로 히스토리 기록을 수정하는 기능을 제공합니다. 단지 수정을 수행할 때 현재 URL이 변경되었음에도 불구하고 브라우저가 즉시 백엔드에 요청을 보내지 않는다는 것입니다. 🎜🎜
  
  🎜설정🎜🎜
  
  🎜
  
  🎜Features🎜🎜🎜🎜경로 점프에서는 페이지를 다시 로드할 필요가 없습니다. 🎜🎜#이 없으면 대부분의 사람들은 해시 라우팅보다 훨씬 좋아 보인다고 생각합니다. 🎜🎜호환성은 해시만큼 좋지 않습니다. 이에 대해서는 아래에서 설명하겠습니다🎜🎜
  🎜생산 환경 문제 및 해결 방법🎜🎜🎜🎜히스토리 프로젝트를 서버에 배포할 때, 이때 브라우저에 URL(예: www.test.com)을 입력합니다. 이때 IP 주소를 얻은 후 요청을 시작합니다. 서버가 요청을 받은 후 해당 결과(html, css, js)를 반환합니다. 프런트 엔드에 리디렉션을 설정하면 페이지가 www.test.com/home으로 이동합니다. 프런트 엔드는 해당 구성 요소와 일치하여 페이지에 렌더링됩니다. 이때 페이지를 새로 고치면 브라우저는 새 요청 www.test.com/home을 보냅니다. 백엔드 서버에 /home에 해당하는 인터페이스가 없으면 404가 반환됩니다. .
  
  🎜🎜 🎜프로덕션 환경 새로 고침 404에 대한 솔루션은 nginx에서 프록시 전달을 통해 수행할 수 있습니다. 매개변수에 리소스가 있는지 순서대로 확인하도록 nginx를 구성하세요. 프로젝트 홈페이지.
  
  🎜🎜 🎜
  
  🎜개발 환경 -historyApiFallback🎜🎜🎜🎜
  
  개발 환경에서는 왜 이 문제가 발생하지 않는지 궁금해하는 친구들도 있습니다. 프로덕션에서와 동일한 새로 고침 작업이 아닌가요? ? 🎜
  
  🎜 🎜🎜
  
  여기서도 궁금한 점이 있었는데 관련 정보를 확인한 결과 vue-cli의 webpack이 처리에 도움이 되었다는 것을 알았습니다🎜
  
  🎜🎜🎜
  
  만약 우리가 이 구성을 false로 변경하면 브라우저는 요청을 가져오기 요청으로 처리합니다. 백엔드에 해당 인터페이스가 없으면 다음 오류 메시지가 나타납니다. 🎜
  
  🎜
  
  🎜🎜 🎜
  
  🎜Summary🎜
  🎜🎜
  지금까지 우리는 vue-roter의 두 가지 라우팅 모드와 차이점을 알고 있습니다. 간단히 말해서 hash는 라우팅 호환성에는 좋지만 #으로 보기 흉합니다. histroy는 일반 URL 경로와 동일하지만 서버에서 별도로 구성해야 합니다. 누구나 자신의 취향에 따라 필요에 따라 사용할 수 있습니다. 질문이 있는 학생들은 댓글 영역에서 소통할 수 있습니다. 🎜
(학습 영상 공유: 웹 프론트엔드 개발, 기본 프로그래밍 영상)