当前位置: 首页 > Web前端 > vue.js

Vue-router的hash和history模式

时间:2023-03-31 23:48:49 vue.js

hash模式和hsitory模式都可以实现无刷新跳转功能。哈希方式:前端路由的路径在真实URL后用井号#拼接。当井号后面的路径发生变化时,不会导致浏览器向服务器发送请求,而是会触发hashchange事件。虽然hash出现在路由中,但它不包含在HTTP请求中,对后端没有影响,因此hash更改时不会重新加载页面。hash的变化会记录在window.history中,可以发现浏览器可以实现前进后退的功能,从而实现免刷新跳转。历史模式是HTML5中的新功能。历史模式包括切换和修改两部分。切换历史状态包括:back、forward、go三种方法。修改历史状态包括:pushState、replaceState。这两个方法都是以back、forward、go为基础的,都提供了修改历史的功能。只是他们在进行修改的时候,虽然改了URL,但是浏览器并没有立即向后台发送请求。通过pushState和replaceState实现无刷新跳转。路径可以随意修改。这个修改会重新请求url,但是需要我们在服务器端配置地址,否则会返回404。还需要在项目中配置一个404接口。