路由模式
vue的路由模式有两种,分别为history和hash模式。
设置路由模式
在vueRouter的构造函数中的选项对象中设置mode属性的值为你想要的模式
const router = new VueRouter({
mode: "history",//设置路由模式为history
routes
});
history模式
history模式利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
使用history模式后URL地址会变成使用/连接的形式
const router = new VueRouter({
mode: "history",//设置路由模式为history
routes
});
hash模式
hash是vue路由的默认模式,使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
使用hash模式后URL地址中会有一个#符号。
const router = new VueRouter({
mode: "hash",
routes
});
hash模式的原理是通过hashchange事件来坚挺hash的变化进行相关操作
window.onhashchange=function(event){
console.log(event.oldUrl,event.newUrl);
}
hash模式和history模式的区别
在history模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误。
在hash模式下只有#符号之前的路径会被包含在请求中,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。所以,aaa.com/#/id=5请求的地址是aaa.com,不会报错
所以,使用history时要确保服务器考虑到了所有可能的url。
在history模式下每改变一次url就会发送一次请求,而hash模式改变路径只是发送相同请求,它只是改变#符号的信息。这也是使用history模式出入不存在的url会报错的原因。
在history模式下可以使用history的go、forward、back、pushState和replaceState方法进行历史纪录的操作。
其中pushState和replaceState即使修改了url也不会立即发送请求,因为这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。
使用场景
- hash模式通常应用在单页面应用中
因为单页面应用只有一个页面,只是在一个页面上修改内容,如果使用history模式会发送不同的请求,请求不同的页面,因此容易出现报错。 - history可以用来美化url
由于hash模式中会带一个#符号看起来不太美观因此可以使用history进行美化
在Vue3.x中设置路由模式为history
VueRouter.createRouter({
history: createWebHashHistory(),
})