这节课我们继续关注router.js这个文件的内容，在创建路由对象的时候，我们有一个history参数，这个参数就表示历史模式

const router = createRouter({
  history: createWebHistory(), // 历史模式
  routes,
})

说简单一点就是我们网页url两种不同的格式

1）hash模式

hash模式使用的是createWebHashHistory ，我们来修改一下代码

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(), //  使用hash模式
  routes,
})

这样我们页面的url中会有一个哈希字符#，#后面就我们页面的名称

http://localhost:8080/#/list

上面是list页面的url

2）HTML5 history模式

HTML5 history模式是利用html5的history API实现的

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(), // html5 history模式
  routes: ,
})

使用html5 history模式，url看起来就很好看了

http://localhost:8080/list

3）对比

1）hash模式完全前端就能实现，html 5 history模式需要服务器配合，服务器需要添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。不过这个工作一般交给运维去做。
2）html 5 history的url形式更加简洁
3）兼容性，都已经用上vue3了，那html 5 history肯定没有兼容性问题了

结合以上三点，还是非常推荐使用html 5 history。