hash模式 https://127.0.0.1/#/index.html
哈希模式中，#号后面的路径是不会传递到后端服务器的。也就是不管用户第一次输入什么，服务器都会返回index页面。（https://127.0.0.1/）默认就是返回index.html页面.
好处：不需要后端配合。
坏处：url 丑，有#号
前端使用window.addlistener('hashchange',()=>{}) 来监听事件的改变。
history模式
URL 示例：
http://example.com/home
原理：
- 利用 HTML5 的
history.pushState和popStateAPI 修改 URL，不刷新页面。 - 前端路由拦截 URL 并渲染对应组件。
优点：
- URL 干净、漂亮。
- 对 SEO 更友好（配合服务端渲染或者预渲染）。
缺点：
- 需要后端配置：当用户访问网站时，直接访问
http://example.com/home时，后端需要返回index.html，否则会 404。（原因在 spa应用中，网站只有一个index.html 页面）。服务器根本就没有home网页。 - 部署时需要额外处理所有路径都指向前端入口。
工作方式示意：
// 切换路由
history.pushState({}, '', '/home');
// 监听浏览器前进/后退
window.addEventListener('popstate', () => {
console.log(location.pathname); // /home
