路由模块的本质 就是建立起 url 和页面之间的映射关系
我们先说一下, 两种模式的原理
hash模式呢, 在 URL 中使用 # 符号来模拟路由状态的改变。当 URL 中的 # 后面的部分发生变化时，浏览器不会向服务器发送请求，而是触发 hashchange 事件，Vue Router 监听这个事件来更新页面。
history模式, 主要通过 HTML5 提供的 History API 来实现路由切换，不再使用 # 符号。当用户点击链接时，浏览器向服务器发送请求，服务器根据请求的 URL 返回相应的页面。前端通过 History API 的 pushState() 和 replaceState() 方法来改变 URL，但不向服务器发送请求。
接下来, 我们就以Vue3来说一下两者的区别
两种模式都是有优缺点的
我们分别说一下, history模式呢, 优点主要是url没有#号, 相对来说比较美观, 但是缺点就是上线后需要服务端配合我们处理路径, 否则的话刷新会有404
在Vue2中, 我们只需要配置一下mode: 'history'即可
但是, 在Vue3中, 需要我们从vue-router中引出一个createWebHistory, 在创建路由器的时候, 指定history: createWebHistory()
我们看一下, 我们切换的时候, 是不带#号的
随后, 我们再说一下哈希模式
hash模式呢, 优点就是兼容性会比较好, 项目上线, 也不再需要服务端处理路径问题, 缺点就是带有#号, 不是很美观, 在SEO优化方面相对较差
我们来写一个哈希模式看一下
需要从vue-router中引出一个createWebHashHistory
现在重新启动一下项目, 我们看看路径的变化
以上就是路由的两种工作模式
今天, 我们就讲解到这里
我们下期见
