hash
vue-router 默认设置为hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
例如
history
可以通过mode来设置模式
history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈,在当前已有的 back、forward、go 基础之上,它们提供了对历史记录修改的功能。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
例如:
通过对比发现,hash模式的url比history会多加一个#。
hash 虽然出现在 URL 中,只有#之前的url会被包含到请求中去,如http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误。
而history,前端的URL必须和实际向后端发起请求的URL一致。如htttp://www.abc.com/book/id。如果后端缺少对/book/id 的路由处理,将返回404错误。