Vue의 해시 라우팅과 히스토리 라우팅의 차이점에 대한 간략한 분석

Vue 또는 React와 같은 프런트엔드 렌더링을 사용할 때 일반적으로 해시 라우팅과 히스토리 라우팅이라는 두 가지 라우팅 방법이 있습니다. 그렇다면 이 두 가지 라우팅 방법의 차이점은 무엇입니까? 아래에 소개해드리도록 하겠습니다. 도움이 되셨으면 좋겠습니다!

해시 라우팅과 히스토리 라우팅 두 모드의 차이점을 다음과 같은 측면에서 정리해보자.

1. 외관

hash: 즉, 주소의 # 기호. 예를 들어 URL: http://www.abc.com/#/hello, hash 값은 #/hello입니다. 해시가 URL에 나타나더라도 HTTP 요청에는 포함되지 않고 백엔드에 전혀 영향을 미치지 않으므로 해시를 변경해도 페이지가 다시 로드되지 않는 것이 특징입니다. [관련 권장 사항: "vue.js tutorialhash:  即地址栏 URL 中的#符号。 比如这个 URL：http://www.abc.com/#/hello， hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中， 但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。【相关推荐：《vue.js教程》】

history: 地址栏中没有 #。比如这个 URL：http://www.abc.com/hello，更美观，是个正常的url，适合推广宣传。

二、功能

history:  在开发app的时候有分享页面，这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合，让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就好了。

三、回车刷新

• hash: 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面;

• history： 利用了 HTML5 History Interface 中新增的 pushState() 和replaceState() 方法。

  这两个方法应用于浏览器的历史记录栈，在当前已有的 back()、forward()、go() 方法的基础之上，这两个方法提供了对历史记录进行修改的功能。当使用这两个方法执行修改时，只能改变当前地址栏的 URL，但浏览器不会向后端发送请求，也不会触发popstate事件的执行，一般会出现404，这时候就需要和后端人配合，设置重定向。

四、使用场景

一般情况下，hash 和 history 都可以，如果你是个颜值控，对 # 符号夹杂在 URL 里有些不爽。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面。调用 history.pushState() 相比于直接修改 hash，存在以下优势：

1. pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；

2. pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；

3. ushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串pushState()"]

역사: 주소에 bar #가 없습니다. 예를 들어 http://www.abc.com/hello URL은 더 아름답고 일반 URL이므로 홍보에 적합합니다.

2. 기능

history: 앱을 개발할 때 공유 페이지가 있는데, 이 공유 페이지를 공유합니다. 일부 앱에서는 URL에 # 번호를 포함하는 것이 허용되지 않으므로 # 번호를 제거하려면 다음을 수행해야 합니다. 기록 모드를 사용하지만 기록 모드 사용의 또 다른 문제는 보조 페이지에 액세스할 때 새로 고침 작업 중에 404 오류가 표시된다는 것입니다. 그런 다음 백엔드 담당자와 협력하여 아파치의 URL 리디렉션을 구성하도록 해야 합니다. nginx.Directing, 홈페이지 경로로 리디렉션하면 됩니다.

3. Enter를 눌러 새로고침하세요

• hash: URL에는 표시되지만 URL에는 포함되지 않습니다. HTTP 요청은 백엔드에 전혀 영향을 미치지 않으므로 해시를 변경해도 페이지가 다시 로드되지 않습니다.

• history: 새로운 pushState() HTML5 히스토리 인터페이스 > 및 <code>replaceState() 메소드의 code> 이 두 가지 메소드는 브라우저의 히스토리 스택에 적용되며, 현재 존재하는 back(), forward(), go()에 기반합니다. code> 메소드에서 이 두 가지 메소드는 과거 기록을 수정하는 기능을 제공합니다. 수정을 수행하기 위해 이 두 가지 방법을 사용하는 경우 <strong>현재 주소 표시줄의 URL만 변경할 수 있지만 브라우저는 백엔드에 요청을 보내지 않으며 일반적으로 404의 popstate 이벤트 실행을 트리거하지 않습니다. 이 때 리디렉션을 설정하려면 백엔드 담당자와 협력해야 합니다. </strong>🎜🎜

4. 사용 시나리오 🎜🎜일반적으로 해시와 히스토리 모두 허용됩니다. URL에 /code> 기호가 섞여 있어서 좀 불편하네요. 🎜🎜보기 흉한 해시를 원하지 않는 경우에는 History.pushState API를 최대한 활용하여 페이지를 다시 로드하지 않고도 URL 점프를 완료하는 라우팅 기록 모드를 사용할 수 있습니다. 해시를 직접 수정하는 것과 비교할 때, History.pushState()를 호출하면 다음과 같은 이점이 있습니다. 🎜

1. 🎜pushState() 새 URL 세트는 다음과 동일한 출처를 가진 모든 URL이 될 수 있습니다. 현재 URL; 해시는 # 뒤의 부분만 수정할 수 있으므로 현재 URL과 동일한 문서의 URL만 설정할 수 있습니다. 🎜🎜
2. 🎜pushState() 새 URL 설정; 현재 URL과 정확히 동일할 수 있으므로 레코드가 스택에 추가되는 작업을 트리거하려면 해시에 의해 설정된 새 값이 달라야 합니다. 🎜🎜
3. 🎜ushState()는 stateObject 매개변수를 통해 전달될 수 있습니다. 레코드에 모든 유형의 데이터를 추가하세요. 반면 해시는 짧은 문자열 pushState()만 추가할 수 있으며 추가적으로 나중에 사용하기 위한 title 속성입니다. 🎜🎜🎜🎜 5. 요약🎜🎜 전통적인 라우팅은 사용자가 URL에 액세스하면 해당 서버가 요청을 받은 다음 URL의 경로를 구문 분석하여 해당 처리 로직을 실행하여 경로 배포를 완료하는 것입니다. 🎜🎜프런트엔드 라우팅은 서버를 포함하지 않으며 해시 또는 HTML5 히스토리 API를 사용하여 프런트엔드에서 구현됩니다. 일반적으로 다양한 콘텐츠를 표시하고 전환하는 데 사용됩니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Vue의 해시 라우팅과 히스토리 라우팅의 차이점에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!