vue2.x与3.x路由模式

路由模式

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 的基础之上，它们提供了对历史记录进行修改的功能。

使用场景

1. hash模式通常应用在单页面应用中
   因为单页面应用只有一个页面，只是在一个页面上修改内容，如果使用history模式会发送不同的请求，请求不同的页面，因此容易出现报错。
2. history可以用来美化url
   由于hash模式中会带一个#符号看起来不太美观因此可以使用history进行美化

在Vue3.x中设置路由模式为history

VueRouter.createRouter({
	 history: createWebHashHistory(),
})