在解决问题之前先让我们了解下vue中的hash模式和history模式:

vue中的hash模式:

hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

window.onhashchange = function(event){

  console.log(event.oldURL, event.newURL);

  let hash = location.hash.slice(1);

  document.body.style.color = hash;

}


当页面地址因为hash值发生变化的时候,地址栏中的url都会被浏览器记录下来,所以我们的浏览器才可以实现前进后退的功能,这样一来,即使浏览器没有请求服务器,页面的状态和url也会被关联起来,这就是我们所熟悉的前端路由。

vue中的history模式:

该模式对应浏览器的是三种状态,即前进,后退,跳转.

例子:

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

hash 和 history 模式的区别

  • hash模式url带#号 兼容性好,history模式不带#号 是h5的新API
  • history模式的优势
    • 没有# url比较规范 用户看着舒服
    • 我们用vue 或者 react做的页面 分享到其他的app中 但是app中不允许 url 中带有 #
    • 注意 : history 不怕前进 不怕后退 怕刷新 在访问了二级页面的时候 做刷新操作 就会出现 404 需要后端配置下 apache或者nginx的url重定向 定向到我们的首页
  • history 模式的原理
    • H5新推出的两个神器:pushState与replaceState
    • 作用就是将url替换且不刷新,好比挂羊头卖狗肉,http并没有去请求服务器该路径下的资源,一旦刷新就会暴露这个实际不存在的“羊头”,显示404。
    • 如何解决404弊端,这就需要服务器端做点手脚,将不存在的路径请求重定向到入口文件(index.html)
  • hash 模式原理
    • window是可以监听到哈希值的变化的(onhashchage事件),这就意味着:当url中的哈希值发生了变化,无需发起http请求,window也可以监听到这种变化,并按需加载前端的代码块
  • 最后补充
    • history 模式下 build之后在本地打开index.html是无效的 hash模式则可以打开

history模式的弊端

该模式在帮我们丢掉了丑陋的#的同时,也为我们带来了不小的麻烦,不怕前进,不怕后退,就怕刷新。当页面刷新的时候会出现页面报404错误,以及我们引入的JS和图片等地址的丢失报错等一系列错误。这是因为刷新页面是实实在在地去请求服务器,而不是像hash模式下被记录下状态与url的页面之间的切换,在hash模式下,前端路由修改的是#中的信息,而浏览器请求服务器时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。

解决方案

这一步需要后台ngin配置支持,如果后台没有正确的配置,当用户在浏览器刷新页面的时候就会出现上述错误。

所以,在打包以后需要将index.html中引入的路径从绝对路径改为相对路径。

例如:

相对路径:<script src="./test.js"></script>

绝对路径:<script src="/test.js"></script>

记得引入文件例如图片等相关的路径可能也要修改(这个要根据自己存放文件的路径来具体区分),或者根据控制台报错时所提示的错误路径,根据这个路径建立一个文件夹,将要引入的文件放进去也可以解决文件或者图片路径找不到的情况。

Nginx配置

项目配置

资源引入路径

保留引用引号

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐