vue路由模式区别

发布时间 2023-11-01 11:04:19作者: 来菜

目的:

  在vue中路由模式有history和hash模式两种模式:他们的目的是为了在SPA单页面情况下,切换页面不会向后端服务器发送请求;

  hash模式: 为以#作为分隔符,

  原理:通过window.location.hash获取 hash值;监听hash中的hashchange事件,当URL的hash发生改变的时候,触发事件。

  在地址栏url中#后面hash值,hash虽然在url中,但是不会被包括在http请求中。对后端没有影响,不会导致页面的重新加载。

  history模式:他直接指向history对象,直接使用正常的路径形式,

  原理:使用h5 History API中的pushState和replaceState方法,可以在不刷新页面的情况下下修改浏览器的历史记录和URL。

 

history运用了浏览器的历史记录栈,之前有back,forward,go方法,之后在HTML5中新增了pushState()和replaceState()方法,它们提供了对历史记录进行修改的功能,不过在进行修改时,虽然改变了当前的URL,但是浏览器不会马上向后端发送请求。

 

hash路由支持低版本的浏览器,而history路由是HTML5新增的API。

 

hash路由支持低版本的浏览器,而history路由是HTML5新增的API。