vuehistory（vuehistory刷新问题）

本篇文章给大家谈谈vuehistory，以及vuehistory刷新问题对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue项目history打包后部署在二级目录相关配置
• 2、关于vue history模式下遇到的坑
• 3、vue路由hash和history
• 4、vue history 模式配置
• 5、vue-router中history和hash两种模式的区别的区别

vue项目history打包后部署在二级目录相关配置

history模式，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接通过路由访问 就会返回 404。所以呢，要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面。

1.vue-router 路由的文件的配置，根据自己部署的二级目录填写

2.在vue.config.js配置文件（如果没有新建一个，项目根目录下）

3.在入口文件中index.html 的head 标签内加入

4.最后就是服务端部署配置，以nginx 为例

配置完这些之后，可以通过二级目录访问到页面了，但是图片资料会加载不了。

1.通过img标签写的图片路径，如果是写的绝对路径例如/static/images, 图片就会访问不到，要改为static/images相对路径，（曾经犯过这样的错误记录一下）；

2.通过css background写的图片路径，如果是写的绝对路径例如/static/images, 图片就会访问不到，因为css在打早消包时会通过loader处理并且通过插件ExtractTextPlugin从JS中抽取出来，所以需要改配置；

这样配置陆含知后打包发现还不行，还需要把css的绝对路径写法改为相对路径，比老顷如background: url('/static/images/login/loginBg.png') no-repeat;改为background: url('../../../static/images/login/loginBg.png') no-repeat;

[img]

关于vue history模式下遇到的坑

背景： vue-cli4 配置vue-router 为history模式 ， 跳转子路由后页面正常，但是刷新页面访问不到了

原因： 因为一般vue脚手架的默认路由配置时hash模式，为了解决直接打开打包文件页面空白的问题，会在configindex.js 下，把build的 assetsPublicPath:'/', 改成assetsPublicPath:'./';

但变成history路由模式时，就要改回来

解决方案：

1. 设置 assetsPublicPath:'/',

2.  （可无）

devServer: {

    open: true,

    host: 'localhost',

    port: 8080,

    https: false,

    hotOnly: false,   

    // http 代理配置皮乎

    proxy: {      

      '/api': {

        target: '',

        changeOrigin: true,

        pathRewrite: {          

 春裂           '^/api': ''

        }

  扒握闭    }

    },

     historyApiFallback: true,  /

    before: (app) = {}

  }, 

vue路由hash和history

SPA ，即 单页面应用 (Single Page Application)。就是只有一张 web页面的应用。单页应用程序 (SPA) 是加载单个html页面并在 用户与应用程序交互时 动态更新该页面的web应用程序。浏览器一开始会加载必需的html、css和 js ，所有的操作都在这张页面上完成，都由js来控制

对于现代开发的槐仔项目来说，稍微复杂一点的SPA，都需要用到 路由 。而 vue-roter 正是 vue 的路由标配，且 vue-router 有 两种模式 ： hash 和 history 。

hash 模式是一种把前端路由的路径用井号 # 拼接在真实 url 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会谈穗重新发起请求，而是会触发 onhashchange 事件。

下面用一个网址来演示以上属性：

history API 是 H5 提供的新特性，允许开发者 直接更改前端路由 ，即更新浏览器 URL 地址而 不重新发起请求 。

hash 与 history 在浏览器下刷新时的区别：

正常页面浏览

改造H5 history模式

HTML5新增的API：

主要有以下特点：

对于 history 来说，确实解决了不少 hash 存在的问题，但是也带来了新的问题：

在实含明卜际的项目中，如何对这两者进行选择：

vue history 模式配置

vue 的路由模式

-dev 模式（独盯辩立服务）

第一凯誉缺步：如何切换history模式 在router.js中配置

第虚罩二步在vue.config.js中配置

vue-router中history和hash两种模式的区别的区别

说到hash和history的区别，最直观的就是在url中， hash带了#，history没有# ，它们两个是路由配置mode的两个选项。

前端路由的核心是在 改变视图的同时不会向后端发出请求 ，浏览器提供的这两种支持就是为了达到这一睁氏含目的。

1.hash------就是指url中#号以及后面的字符

①hash也称作锚点，其中的#和css里面的#是一个意义，它本身是用来做页面定位的，可以是对应的id元素显示在可视区域内。

②我们可以通过 window.location.hash 获取hash值

③hash中有一个 hashchange 事件，当hash值发生变化时会触发这个事件，语法是： window.onhashchange=person  或者   body onhashchange='person' ,这个事件 会覆盖 现有的事件处理程序，如果在想要添加一个新的事件处理程序的前提下，还不会覆盖原有的事件处理程序，可以通过' addEventListener '

另外hashchange事件有两个属性：

④地址栏url中的#符号，比如：...    它的特点在于#/a虽然在url中，但不会被包括在http请求中， 对后端完全没有影响 ，因此 改变hash并不会导致页面的重新加载 。

2.history------它直接指向History对象，它表示当前窗口的浏览历史，History对象保存了当前窗口访问过的所有页面网址

①history.length 属性保存着历史记录的url数量，初始值是 1，如果当前窗口访问了四个网址，那么history.length=4

 ②可以在浏览器历史之间移动

go() 接收一个整数为参核悉数，移动到该整数指定的页面，比如 history.go(1) 相当于 history.forward(),history.go(-1) 相当于 history.back(),history.go(0) 相当于 刷新当前页面

back() 移动到上一个访问页面，等同于浏览器的后退键,常见的返回上一页就可以用back()，是从浏览器缓存中加载，而不是重新要求服务器发送新的网页

forward() 移动到下一个访问页面，等同于浏览器的前进键

③history.pushState() ------在浏览器中添加历史记录，这个方法 不会触发页面刷新 ，只是导致了history对象发生变化，地址栏会有反应。它有三个参数：

state: 一个与指定网址相关的状态对象， popState 事件触发时，该对象会传入回调函数，如果不需要这个对象，此处可填null

title : 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null

url: 新的网址，必须与当前页面处在同一个域 ，浏览器的地址栏将显示这个网址

如果pushState的url参数，设置了一个新的锚点值（即hash），并不会触发hashChange事件，如果设置了一个跨域网址，则会报错。

④history.replaceState()------ 这个方法的参数和pushState()方法一摸一样，区别是它修改浏览器历史当中的记录

⑤history.state 返回当前页面的state对象

⑥每当同一个文档的浏览历史（即history）出现变化时，就会触发popState事件

仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有 用户点击浏览器后退和前进按钮时，或者使用js调用back、forward、go方法时才会触发 。另外该事件只针对 同一个文档 ，如果浏览历史的切换悉笑，导致加载不同的文档，该事件不会被触发

使用的时候，可以为popState事件指定回调函数，回调函数的参数是一个event事件对象，它的 state属性 指向pushState和replaceState方法为当前url所提供的状态对象（即这两个方法的 第一个参数 ）。

⑦history.scrollRestoration = 'manual'; 关闭浏览器自动滚动行为

history.scrollRestoration = 'auto'; 打开浏览器自动滚动行为(默认)

一般场景下，hash和history都可以使用

history

①优点： 如果你更 在意颜值 ，那么就使用没有#的history模式，这种模式充分利用history.pushState  API来完成url的跳转，而且 不需要重新加载页面 ，通过pushState()设置的url可以是和当前url同源的任意url，甚至可以与当前url一模一样,它通过stateObject参数可以添加 任意类型 的数据到记录中，它还可以 额外设置title属性 ，提供给后续使用。 利用pushState和replaceState方法，对历史记录进行修改

缺点： 就是如果通过url向后端发起请求时，尤其是在用户手动输入url 回车或者重新刷新（重启）浏览器 的时候， 会报404错误 ，找不到指定路由，需要 后端 去指向正确的路由匹配, 比如当url不匹配时跳转到index.html，虽然通过以上两种方法改变了当前的url， 但是浏览器不会立即向后端发送请求

hash

②优点 ：回车刷新可以加载到hash值对应的页面，并且支持低版本浏览器和IE浏览器，#/a虽然在url中，但不会被包括在http请求中， 对后端完全没有影响，因此改变hash不会重新加载页面 。

缺点：hash 设置的新值必须与原来的不一样才会出发动作并且将记录添加到栈中，它只可以修改#后面的部分，所以只能设置与当前url同文档的url，只有 短字符串 才可以添加到记录中

关于vuehistory和vuehistory刷新问题的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。