vue的路由模式_vue -router 路由模式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38713274/article/details/115589549

本文详细介绍了前端开发中两种常见的路由模式：hash模式和history模式。hash模式利用URL中的hash值改变来实现页面间的跳转，而history模式则通过HTML5的新特性实现更接近原生应用的体验。两者各有特点，在不同的应用场景下选择合适的模式至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hash模式

URL 中带有 “#” 则为 hash 模式，hash 模式 “#” 之前的内容会被包含在请求中，之后的不会包含在请求中。

hashchange 事件，可以在 window 对象上监听 hash 的变化。

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL);
  console.log(location.hash);
}

1、改变 URL 不会触发页面重新加载，不算是 http 请求，不利于SEO优化；
2、只能修改 “#” 后面的部分，因此只能跳转与当前 URL 同文档的 URL；
3、只能通过字符串改变 URL；
4、刷新不进行后端请求。

前端的 URL 必须和实际向后端发起请求的URL一致，如果后端缺少参数的路由处理，将返回404。

使用 HTML5 的 pushState() 和 replaceState() 来实现。
pushState()：可以改变 url 地址且不会发送请求；
replaceState()：可以读取历史记录栈，还可以对浏览器记录进行修改。

window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)

1、新的 URL 可以是与当前 URL 同源的任意 URL；
2、可以自由修改 path；
3、可以实现前进、后退；
4、刷新会进行后端请求。