Vue의 두 가지 라우팅 모드(해시 및 기록)에 대해 이야기해 보겠습니다.

라우터에는 두 가지 모드가 있습니다. 하나는 hash 모드이고 다른 하나는 vue-cli를 사용할 때입니다. vue-router에 기본적으로 빌드된 vue 프로젝트, 특별한 구성이 없으면 기본값은 hash 모드입니다hash模式、另一种是history模式，在使用vue-cli以及vue-router默认搭建的vue项目，如果不做特殊的配置，默认就是hash模式

这两种模式各有自己的优势，但他们的使用区别，却多多少少都会在面试当中被问到

今天就一起来学习下

哈希模式(hash)

vue-router默认hash模式,使用url的哈希(hash)来模拟一个完整的URL,当URL改变时,页面不会重新加载。【相关推荐：vuejs视频教程、web前端开发】

如下所示

http://localhost/#home

特点: #号后面的参数不会传送给服务器,兼容性好,不会作为路径的一部分发送给服务器,也就是它不会包括在HTTP请求体中,对后端完全没有影响,只是我们前端同学自己玩

页面刷新时,会停留在当前页面,不会重新加载

如果觉得hash路径很丑,不简洁,我们可以用路由的history模式,这种模式充分利用history.pushState API或replaceState,来完成,url跳转而无需重新加载页面

历史模式

history模式:在实例化配置对象中添加mode模式,值为historyhash模式就会变成history模式

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

这两种方式的使用都是没啥问题的,如果你在意浏览器url的颜值,#符号掺杂在url里看起来确实有些不优雅

如果你想url更好看,那么就使用history模式

但是:在hash模式下,使用hash符号之前的内容会被包含在请求体中,#号后面的不会发送给服务器

而history模式下,前端的URL必须和实际向后端发起请求的URL保持一致

如:https://itclan.cn/fontend/id,如果后端缺少没有对/fontend/id的路由处理,那么它将返回404错误

如果你想要支持history模式,那么需要后端同学支持,想要彻底解决404的问题,需要与后端同学协商,因为需要后端与前端路由做匹配

在服务端增加一个覆盖所有情况的时候的候选资源,如果url匹配不到任何静态资源,应该返回一个首页页面

如果出现404,容易让用户觉得这是一个Bug

如何解决前台刷新页面404问题

解决这个问题:如果你用的是Node做后端服务,那么在Node后台中可以加入一个中间件比如：connect-history-api-fallback即可解决这种404问题

如果是java或php,找后端同学,让后端路由与前端路由做匹配,或是用Ngnix做中间代理

如下这段简易的Node服务代码，可以命名为server.js,同时安装express以及connect-history-api-fallback中间件

启动后端服务执行命令node server.js

const express = require('express');
const history = require('connect-history-api-fallback')

const app = express()
app.use(history())
app.use(express.static(__dirname+'/static'));


app.listen(5005,(err)=> {
  if（！err）consle.log('服务器启动成功了')
})

把前端打包生成的dist文件内的代码,放到static中,通过这一操作,即可解决刷新页面,404的问题

对单页面spa的应用理解

我们的前端使用的vue-router中的两种模式,就是单页面应用,整个应用只有一个router路由器,是可以通过$router属性获取到

也就是说,整个应用只有一个完整的页面,同时,点击页面中的导航链接,不会刷新页面,只会是页面的局部更新

而我们页面中的数据,往往需要通过ajax请求来获取

现在开发的新项目,都是前后端分离,基本上都是单页面应用

总结

前端路由,有两种模式,一种是hash模式,另一种是history模式,其中hash模式是默认模式,#后面的不会发送给服务端,不会重新刷新加载页面,而history模式,url虽然比较好看,但是想要完整支持,需要后端同学提供支持,后端路由与前端的路由需要做匹配

否则部署到线上,一刷新页面,会出现404이 두 모드 나름의 장점이 있지만 사용법의 차이는 면접 때 어느 정도 물어볼 것입니다

🎜오늘 함께 배워볼까요🎜

해시 모드(해시) h2>🎜vue-router는 url의 해시(hash)를 사용하여 전체 URL을 시뮬레이션하는 <code>hash 모드로 기본 설정됩니다. , URL이 변경되면 페이지가 다시 로드되지 않습니다. [관련 권장사항: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발]🎜🎜아래와 같이🎜rrreee🎜특징: # 번호 뒤의 매개변수는 서버에 전송되지 않습니다. 호환성이 좋으며 경로의 일부로 서버에 전송되지 않습니다. HTTP 요청에 포함되어 있어 백엔드에는 전혀 영향을 미치지 않습니다. 단지 프론트엔드 학생들이 스스로 플레이하는 것뿐입니다.🎜🎜페이지가 새로고침되면 그대로 유지됩니다. 현재 페이지가 로드되지 않으며 다시 로드되지 않습니다🎜🎜해시 경로가 보기 흉하고 간결하지 않다고 생각한다면 history 모드를 최대한 활용하는 라우팅의 history 모드를 사용할 수 있습니다. >history.pushState API 또는 replaceState, 완료하려면 url페이지를 다시 로드하지 않고 점프🎜

기록 모드

🎜history 모드: 인스턴스화된 구성 객체 모드 모드에 를 추가합니다. 값은 <code>history입니다. 수정 후에는 hash 모드가 history 모드가 됩니다🎜rrreee🎜브라우저에 신경쓰시면 이 두 가지 방법을 사용하는데 문제가 없습니다 의 모습 url, url에 # 기호가 섞여 있으면 좀 촌스러워 보이죠🎜🎜url을 바꾸고 싶다면 괜찮아 보이는데, 그런 다음 history 모드를 사용하세요🎜🎜하지만: hash 모드에서는 hash 기호를 사용하기 전의 내용이 요청 본문에 포함됩니다. # 번호 뒤에 오는 내용은 서버로 전송되지 않습니다🎜🎜그리고 기록 모드에서는 프런트 엔드의 URL이 다음과 같아야 합니다. 백엔드 URL에 대한 실제 요청과 동일하게 일관되게 유지됩니다🎜🎜예: https://itclan.cn/fontend/id, 백엔드가 누락된 경우 해당 /fontend/id 라우팅 처리가 없으면 404 오류가 반환됩니다🎜🎜history 모드를 지원하려면 다시 지원해야 합니다 -end 지원 404 문제를 완전히 해결하려면 백엔드 급우들과 협상이 필요합니다. 백엔드와 프론트엔드 경로를 일치시키는 것이 필요하기 때문입니다🎜🎜후보 추가 url이 일치할 수 없는 경우 모든 상황을 처리하기 위해 서버의 리소스 모든 정적 리소스는 홈 페이지를 반환해야 합니다🎜🎜404가 나타나면 사용자는 이것이 버그라고 생각하기 쉽습니다🎜

포그라운드에서 페이지를 새로 고치는 404 문제를 해결하는 방법

🎜이 질문 해결: Node를 백엔드 서비스로 사용하는 경우 connect-history-api-fallback과 같은 미들웨어를 Node 배경에 추가하면 이 404 문제를 해결할 수 있습니다🎜🎜java인 경우 또는 php, 백엔드 라우팅을 프런트엔드 라우팅과 일치시킬 백엔드 동급생을 찾거나 중간 프록시 역할을 하는 Ngnix를 사용하세요🎜🎜다음은 server.js로 이름을 지정하고 express 및 <code>connect-history-api 설치할 수 있는 간단한 <code>노드 서비스 코드 -fallback middleware🎜🎜백엔드 서비스 실행 명령 시작 node server.js🎜rrreee🎜프론트엔드에서 생성된 패키지 dist에 코드 넣기 파일을 static으로 변환합니다. 이 작업을 통해 페이지 새로 고침 문제와 404🎜

응용 이해를 해결할 수 있습니다. 단일 페이지 스파

🎜프런트 엔드에서 사용하는 vue-router의 두 가지 모드는 단일 페이지 애플리케이션이며 전체 애플리케이션에는 라우터가 하나만 있습니다. 라우터는 $router 속성을 ​​통해 얻을 수 있습니다. 즉, 전체 애플리케이션에는 단 하나의 완전한 페이지만 있습니다. 동시에 페이지에서 탐색 링크를 클릭하면 페이지가 새로 고쳐지지 않습니다. 페이지는 부분적으로만 업데이트됩니다🎜🎜그리고 우리 페이지의 데이터는 ajax 요청을 통해 얻어야 하는 경우가 많습니다🎜🎜현재 개발된 새 프로젝트는 기본적으로 프런트엔드와 백엔드가 모두 분리되어 있습니다. 단일 페이지 애플리케이션🎜

요약

🎜프런트 엔드 라우팅에는 두 가지 모드가 있습니다. 하나는 hash 모드이고 다른 하나는 입니다. 히스토리 모드, hash 모드가 기본 모드인 경우 다음 #는 서버로 전송되지 않으며 로딩 페이지가 새로 고쳐지지 않습니다. history 모드, url이 더 좋아 보이지만 완전한 지원을 원한다면 백엔드 라우팅과 프런트엔드 라우팅이 필요합니다. to match🎜🎜 그렇지 않으면 온라인으로 배포하고 페이지를 새로 고치면 404 문제가 발생합니다🎜

(학습 영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 영상)

위 내용은 Vue의 두 가지 라우팅 모드(해시 및 기록)에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!