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

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: &#39;history&#39;,
  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(&#39;express&#39;);
const history = require(&#39;connect-history-api-fallback&#39;)

const app = express()
app.use(history())
app.use(express.static(__dirname+&#39;/static&#39;));


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

로그인 후 복사

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