1.hash
hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
hash
模式下,仅 hash
符号之前的内容会被包含在请求中,如 http://www.npc.com
,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
hash
设置的新值必须与原来不一样才会触发动作将记录添加到栈中。
hash
只可修改 #
后面的部分,因此只能设置与当前 URL 同文档的 URL。
hash
只可添加短字符串。
2.history(服务器环境下才有效果)
pushState()
设置的新 URL 可以是与当前 URL 同源的任意 URL;;pushState()
设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;pushState()
通过stateObject
参数可以添加任意类型的数据到记录中;;pushState()
可额外设置title
属性供后续使用。
利用了 HTML5 History Interface 中新增的 pushState()
和 replaceState()
方法。(需要特定浏览器支持)。
history
模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.abc.com/book/id
。如果后端缺少对 /book/id
的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”