当前位置

首页 > IT科技 > vue路由模式

vue路由模式

推荐人: 来源: 秒知社 阅读: 3.03W 次

在vue-router路由对象中,路由有两种模式:hash和history,默认的是hash模式。

hash路由模式:hash模式的工作原理是hashchange事件,可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。

history路由模式:把window.history对象打印出来可以看到里边提供的方法和记录长度。

vue路由模式

使用场景:

一般场景下,hash 和 history 都可以,除非你更在意颜值,# 符号夹杂在 URL 里看起来确实有些不太美丽。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成URL 跳转而无须重新加载页面。

两种模式对比:

hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

history 模式下,前端的URL必须和实际向后端发起请求的 URL一致,如http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404错误。

vue路由模式 第2张

关于vue的路由模式,我们就了解到这啦!